// ============================================================================
// :: Button
// ============================================================================
// Styling for buttons
.a-button {
	position: relative;
	z-index: $z-index-low;

	display: inline-flex;
	justify-content: center;
	align-items: center;

	overflow: hidden;
	padding: 1rem 2rem;

	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
	font-size: $font-size-1x-large;
	text-align: left;

	border-radius: $border-radius-l;
	border: none;
	background-color: $background-color-green;

	color: $text-color-white;

	-webkit-appearance: none;

	transition: transform 0.3s ease-in-out;

	cursor: pointer;

	@include respond-at($screen-small-base) {
		padding: 1.2rem 3rem;
	}

	&::before {
		content: "";

		position: absolute;
		top: 0;
		left: 0;
		z-index: $z-index-lowest;

		display: block;
		width: 100%;
		height: 100%;

		background: $gradient-primary;

		transition: opacity 0.2s ease-in-out;
	}

	&:focus:not(.focus-visible):not(:hover) {
		box-shadow:
			0 0 0 0.2rem $background-color-white,
			0 0 0 0.3rem $outline-color-green;
		outline: none;
	}

	&:hover {

		&::before {
			opacity: 0;
		}

		.a-button__icon {
			color: $text-color-white;
		}
	}
}

.a-button__text {
	z-index: $z-index-highest;

	font-family: $font-family-beausans;
	font-weight: $font-weight-bold;
	font-size: $font-size-1x-small;
	line-height: $line-height-1x-large;
	text-align: left;

	color: $text-color-white;

	transition: color 0.2s ease-in-out;

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

.a-button__icon {
	font-size: $font-size-1x-small;

	color: $text-color-white;

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

.a-button__icon--before {
	margin-right: 1rem;
}

.a-button__icon--after {
	margin-left: 1rem;
}

.a-button[disabled] {
	background: $background-color-grey-light;
	color: $text-color-grey;

	&::before {
		display: none;
	}

	&:hover {
		cursor: not-allowed;
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
//inverted buttons, used on a background
.a-button--inverted {
	background: $background-color-white;

	&::before {
		display: none;
	}

	.a-button__text,
	.a-button__icon {
		color: $text-color;
	}

	&:hover:not([disabled]) {
		background: $background-color-white;

		.a-button__text,
		.a-button__icon {
			color: $text-color-primary;
		}
	}

	&:focus:not(.focus-visible):not(:hover) {
		box-shadow: 0 0 0 0.1rem $outline-color-green;
		outline: none;
	}

	&[disabled] {
		background: $background-color-white;
	}
}

.a-button--round {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 4.1rem;
	height: 4.1rem;
	overflow: hidden;

	padding: 0;

	border-radius: $border-radius-round;
	background: $background-color-grey-extra-light;

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

	&::before {
		opacity: 0;

		transition: opacity 0.3s ease-in-out;
	}

	.a-button__icon {
		margin-right: 0;

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

		color: $text-color;
	}

	&:hover {
		transform: scale(0.9);

		&::before {
			opacity: 1;
		}

		.a-button__icon {
			color: $text-color-white;
		}
	}
}

.a-button--green {
	background-color: $background-color-green;
}

.a-button__modal {
	float: right;

	margin-top: 0 !important; /* stylelint-disable-line */
	margin-bottom: 2rem !important;  /* stylelint-disable-line */
}

.a-button--hide-text {

	.a-button__text {
		display: none;
	}
}