Button: Full Icon

.a-button {
	@extend .u-t-line--18;
	@include fluid-props(font-size, $fluid-min, $fluid-max, 8px, 14px);
	@include fluid-props(padding-left padding-right, $fluid-min, $fluid-max, 14px, 30px);
	@include fluid-props(padding-top, $fluid-min, $fluid-max, 10px, 15px);
	@include fluid-props(padding-bottom, $fluid-min, $fluid-max, 9px, 14px);

	// This comes from the button-reset mixin,
	// but it was messing with the font-site extend, so I copied it here
	border-radius: 0;
	background-color: transparent;
	outline: 0;
	z-index: 0;
	position: relative;
	color: $color-primary;
	border: 1px solid $color-primary;
	text-decoration: none;
	font-family: $font-highlight;
	font-weight: $font-weight-bold;
	text-transform: uppercase;
	display: inline-block;
	letter-spacing: 1px;
	transition: color $transition-fast ease-out;
	overflow: hidden;
	cursor: pointer;
	transition: color $transition-fast/2 ease-out;

	.a-icon {
		@include fluid-props(width height, $fluid-min, $fluid-max, 15px, 22px);
		position: absolute;
		top: 50%;
		right: .6em;
		fill: currentColor;
		transform: translateY(-50%);

		+ span {
			@include fluid-props(padding-right, $fluid-min, $fluid-max, 1.1em, .7em);
		}
	}

	&::after{
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		background-color: $color-primary;
		width: 100%;
		height: 100%;
		z-index: -1;

		transform: scaleX(0);
		transform-origin: left center;
		transition: transform $transition-fast ease-out;
	}



	@include hover-behaviour {
		@extend .a-button--hover;
	}
}

.a-button--full {
	color: $color-text-negative;
	background-color: $color-primary;

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

.a-button--hover {
	color: $color-text-negative;
	transition-delay: $transition-fast/4;

	&::after {
		transform: scaleX(1);
	}
}