.ct-social-box {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;

	li {
		line-height: normal;
		margin-bottom: 0 !important;

		a {
			transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
						background 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

			svg {
				fill: currentColor;
			}
		}
	}

	&[data-type="simple"] {
		margin: -10px -8px 0 -8px;

		li {
			padding: 10px 8px 0 8px;

			a {
				svg {
					width: 13px;
					height: 13px;
				}
			}
		}
	}


	// rounded
	&[data-type="rounded"] {
		margin: -10px -5px 0 -5px;

		li {
			padding: 10px 5px 0 5px;

			a {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 35px;
				height: 35px;
				background: #e8ebf0;
				border-radius: 100%;

				svg {
					width: 12px;
					height: 12px;
				}

				&:hover {
					color: #fff;
					background: $primary;
					background: var(--primaryColor);
				}
			}
		}
	}
}