// ============================================================================
// :: Link
// ============================================================================
.a-link {
	font-family: $font-family-beausans;
	font-weight: $font-weight-semibold;
	font-size: $font-size;
	line-height: $line-height-2x-large;
	text-decoration: none;
	text-align: left;

	color: $text-color;
	border: none;
	background: transparent;

	transition: color 0.2s ease-in-out;

	@include respond-to($screen-small-base) {
		font-size: $font-size-1x-small;
		line-height: $line-height-1x-large;
	}

	&:hover {
		color: $text-color-primary;

		cursor: pointer;
	}

	&:focus:not(.focus-visible):not(:hover) {
		@include outline();
	}

	&[class*="icon"] {
		display: inline-flex;
		align-items: flex-start;

		transition:
			transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s,
			color 0.2s ease-in-out;

		&::before {
			display: block;
			margin-top: 1rem;
			margin-right: 1rem;

			font-size: $font-size-1x-small;

			color: $text-color-primary;

			transform: translateY(-50%);

			transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		&:hover {
			transform: translateX(0.6rem);

			&::before {
				transform: translateY(-50%) translateX(0.3rem);
			}
		}
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-link--icon-after {
	order: 1;

	&::before {
		order: 2;
		margin-right: 0;
		margin-left: 1rem;
	}
}

.a-link--inline {
	position: relative;

	font-weight: $font-weight-medium;
	font-size: $font-size;

	@include respond-to($screen-small-base) {
		font-size: $font-size-1x-small;
		line-height: $line-height-1x-large;
	}

	&::after {
		content: "";

		position: absolute;
		left: 0;
		bottom: 0;

		display: block;
		width: 100%;

		height: 0.2rem;

		background-color: $background-color-grey;

		transform-origin: center right;

		transition: background-color 0.2s ease-in-out;

		@include respond-to($screen-small-base) {
			height: 0.1rem;

			background-color: $background-color-white;
		}
	}

	&:hover {
		color: $text-color-primary;

		&::after {
			background-color: $background-color-primary;

			animation: line 1.5s cubic-bezier(0.4, 0, 0.2, 1);
		}
	}
}

.a-link--inverted {
	color: $text-color-white;

	transition: color 0.2s ease-in-out;

	&[class*="icon"]::before {
		color: $text-color-white;
		opacity: 0.7;

		transition: opacity 0.2s ease-in-out, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	&:hover {
		color: $text-color-white;

		&::after {
			background-color: $background-color-white;
		}
	}
}

.a-link--inverted {

	&.a-link--inline {

		&::after {
			background-color: $background-color-white-1x-light;

			transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);

			@include respond-to($screen-small-base) {
				background-color: $background-color-white;
			}
		}

		&:hover {

			&::after {
				background-color: $background-color-white;

				animation: none;
			}
		}
	}
}
// ============================================================================
// :: Animation
// ============================================================================
@keyframes line {

	0% {
		background-color: $background-color-grey;

		transform-origin: center right;
		transform: scaleX(1);
	}

	25% {
		background-color: $background-color-grey;

		transform: scaleX(0);
		transform-origin: center right;
	}

	35% {
		background-color: $background-color-primary;

		transform-origin: center left;
		transform: scaleX(0);
	}

	50% {
		background-color: $background-color-primary;

		transform: scaleX(1);
		transform-origin: center left;
	}
}