@import '../../assets/scss/index';

%button {
	position: relative;
	display: inline-block;
	line-height: 1.2;
	outline: 0;
	text-decoration: none;
	padding: 10px 20px;
    margin: 0;
    border: 0;
    background-color: none;

	&:hover {
		cursor: pointer;
	}
}

button,
.a-btn {
	@extend %button;

	&--primary {
		padding: 0;
		text-transform: uppercase;
        color: $color-primary;
		transition: color 0.35s ease-in-out;
        @include fontSize(16px, 18px, 24px);
	    font-family: $futura-medium;
	    text-transform: uppercase;
	    letter-spacing: 3.75px;
	    transition: $basic-transition;
	    padding-right: 30px;

		&:after {
			font-family: $font-family-icon;
            content: "";
            @include fontSize(18px, 22px, 26px);
			display: inline-block;
			width: 40px;
			height: 19px;
			position: absolute;
			top: 50%;
			transform: translate(0, calc(-50% - 2px));
			transition: $basic-transition;

			@media screen and (min-width:$bp-tablet) {
				height: 21px;
				transform: translate(0, calc(-50% - 4px));
				padding-left: 8px;
			}

			@media screen and (min-width:$bp-desktop) {
				height: 28px;
				transform: translate(0, calc(-50% - 1px));
				padding-left: 12px;
			}
		}

		&:hover {
			color: $color-primary;

			&:after {
				transform: translate(8px, calc(-50% - 2px));

				@media screen and (min-width:$bp-tablet) {
					transform: translate(8px, calc(-50% - 4px));
				}

				@media screen and (min-width:$bp-desktop) {
					transform: translate(8px, calc(-50% - 1px));
				}
			}
		}
	}
}

.a-btn--secondary {
	font-family: $futura-medium;
	@include fontSize(14px, 16px, 18px);
	letter-spacing: 0.6px;
	border: none;
	background-color: $color-primary;
	color: $color-white;
	transition: $basic-transition;
	padding: 16px 100px;

	&:hover {
		background-color: $color-black;
		color: $color-white;
	}
}