Link Button: Default

@use "sass:math";
@use "../../../scss/variables" as v;
@use "../../../scss/mixins" as m;

.a-link-button {
	@include m.clean-link;
	
	& {
		position: relative;
		
		font-size: 0.875em;
		display: inline-block;
		padding-right: 1.5em;
		line-height: 1.2em;
		padding-left: 0;
		color: v.$color-primary;
		font-family: v.$font-secondary;
		font-weight: v.$font-weight-bold;
		text-transform: uppercase;
		cursor: pointer;
		transition: color v.$transition-fast v.$transition-ease;
		letter-spacing: 0.08928em;
	}
	
	@include m.fluid-props(padding-top padding-bottom, v.$fluid-min, v.$fluid-max, 6px, 10px);

	@include m.high-contrast {
		color: v.$color-primary-dark;
	}

	&::after {
		content: "";
		width: 0.6em;
		height: 0.6em;
		border-color: v.$color-primary;
		border-top: 0.1666666667em solid; // 2/12
		border-right: 0.1666666667em solid; // 2/12
		transform: translateY(-50%) translateX(-0.5em) rotate(45deg);
		transition: transform v.$transition-fast v.$transition-ease;
		position: absolute;
		right: 0;
		top: 50%;

		@include m.high-contrast {
			border-color: v.$color-primary-dark;
		}
	}

	@include m.hover {
		color: v.$color-primary-dark;

		&::after {
			transform: translateY(-50%) translateX(0.5em) rotate(45deg);
		}
	}

	&--grey {
		color: v.$color-grey-3;

		@include m.high-contrast {
			color: v.$color-text;
		}

		@include m.hover {
			color: v.$color-text-light;

			@include m.high-contrast {
				color: v.$color-text;
			}
		}

		&::after {
			border-color: v.$color-grey-3;

			@include m.high-contrast {
				border-color: v.$color-text;
			}

			@include m.hover {
				color: v.$color-text-light;

				@include m.high-contrast {
					color: v.$color-text;
				}
			}
		}
	}

	&--white {
		color: v.$color-white;

		@include m.hover {
			color: v.$color-white;
		}

		&::after {
			border-color: v.$color-white;
		}
	}
}