[class^="socicon-"],
[class*=" socicon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'Socicon' !important;
	speak: none;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

// icon container
.socicon {
	text-align: center;

	// the icon itself that contains the `socicon-*` class
	i {
		display: inline-block;
		width: @socicon-width-obb;
		height: @socicon-height-obb;
		line-height: 0;
		vertical-align: middle;

		font-size: @socicon-font-size-obb;
		text-transform: none;

		speak: none;
		transition: @socicon-transition-obb;

		&:before {
			line-height: @socicon-height-obb;
		}

		& when not (@socicon-brand-color-bool) {

			& when (@socicon-color-obb = auto) {
				color: @socicon-color-auto-obb;
			}
			& when not (@socicon-color-obb = auto) {
				color: @socicon-color-obb;
			}

			& when not (@socicon-container-style-option-obb = none) {
				background-color: @socicon-bg-obb;
			}
		}

		& when (@socicon-container-style-option-obb = none) { border-radius: @border-radius-base; }
		& when (@socicon-container-style-option-obb = circle) { border-radius: 50%; }
		& when (@socicon-container-style-option-obb = rounded-corners) { border-radius: @socicon-container-border-radius-obb; }
		& when (@socicon-container-style-option-obb = square) { border-radius: 0; }
	}

	&:hover,
	&:active {

		i {
			& when (@socicon-animation-option-obb = spin) {
				transform: scale(1.1) rotate(360deg);
			}
			& when (@socicon-animation-option-obb = zoom) {
				transform: scale(1.2);
			}
		}
	}
}

a.socicon {
	text-decoration: none;
}