.social-icon {
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1em;

	li {
		display: inline-block;
		margin-right: 1.2em;
		font-size: 1em;
		line-height: 1em;

		&:last-child {
			margin-right: 0;
		}
	}
	i {
		display: inherit;
		justify-content: inherit;
		align-items: inherit;
	}

	/* Sizes */
	&.social-icon-sm {
		font-size: 14px;
	}
	&.social-icon-md {
		font-size: 18px;
	}
	&.social-icon-lg {
		font-size: 20px;

		li {
			margin-right: 1em;
		}
	}
	/* Directions */
	&.vertical {

		li {
			display: block;
			margin-right: 0 !important;
			margin-bottom: 1.2em;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	/* Shapes */
	&.round,
	&.semi-round,
	&.square,
	&.circle {

		li {
			margin-right: 0.5em;
		}
		a {
			display: inline-flex;
			width: 40px;
			height: 40px;
			align-items: center;
			justify-content: center;
			background-color: var(--color-primary);
			color: #fff;

			&:hover {
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
				transform: translate(0, -2px);
			}
		}
		&.social-icon-sm {

			li {
				margin-right: 0.3em;
			}
			a {
				width: 30px;
				height: 30px;
			}
		}
		&.social-icon-md {

			li {
				margin-right: 0.6em;
			}
			a {
				width: 48px;
				height: 48px;
			}
		}
		&.social-icon-lg {

			li {
				margin-right: 0.7em;
			}
			a {
				width: 55px;
				height: 55px;
			}
		}
	}
	&.round {

		i,
		a {
			border-radius: 8%;
		}
	}
	&.semi-round {

		i,
		a {
			border-radius: 2%;
		}
	}
	&.circle {

		i,
		a {
			border-radius: 50em;
		}
	}
	/* Color Schemes */
	&.scheme-dark {

		a {
			color: #000;
		}
		&.semi-round,
		&.round,
		&.square,
		&.circle {

			a {
				background-color: #000;
				color: #fff;
			}
		}
	}
	&.scheme-gray {

		a {
			color: #999;
		}
		&.semi-round,
		&.round,
		&.square,
		&.circle {

			a {
				background-color: #999;
			}
		}
	}
	&.scheme-white {

		a {
			color: #fff;
		}
		&.semi-round,
		&.round,
		&.square,
		&.circle {

			a {
				background-color: #fff;
				color: #000;
			}
		}
	}
	&.branded-text {

		a {
			background-color: transparent;
		}
	}
	&.branded {

		i {
			width: 100%;
			height: 100%;
			position: relative;
		}
		a {
			background-color: transparent;
			line-height: normal;
		}
	}
}