// Logo settings
$base-font-size: 12;
$color-background: #fff;
$color-signature: #2183ea;
$color-signature-hover: #2183ea;

.signature {
	font-family: 'Space Mono';
	font-size: $base-font-size * 1px;
	text-align: center;
	height: 100px;
	line-height: 100px;
	background-color: $color-background;

	&__link {
		position: relative;
		display: inline-block;
		margin: 1em 0;
		line-height: 1;

		&:hover {
			.signature__label,
			.signature__name {
				color: $color-signature-hover;
				transform: scale3d(1, 1, 1);

				&:before {
					transition-timing-function: ease;
					transform: scale3d(1, 1, 1);
				}
			}
		}
	}

	&__name,
	&__label {
		position: relative;
		display: inline-block;
		font-size: 1em;

		&:before {
			background: $color-signature-hover;
		}
	}

	&__label {
		margin-right: 0.1666666667em;
		color: $color-signature;
		opacity: 0.6;
		transition: color 0.5s;
		transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	}

	&__name {
		padding: 0 0.3333333333em;
		font-weight: bold;
		line-height: 1.4;
		color: $color-signature;
		text-transform: uppercase;
		transform: translate3d(-0.25em, 0, 0);
		transition: transform 0.5s, color 0.5s;
		transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);

		&:before {
			content: '';
			position: absolute;
			z-index: -1;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 50%;
			opacity: 0.2;
			transform: scale3d(0, 1, 1);
			transform-origin: 0% 50%;
			transition: transform 0.5s;
			transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
		}
	}
}
