// ============================================================================
// :: Tag
// ============================================================================
.a-tag {
	padding: 0.8rem 1.5rem 0.5rem;

	font-family: $font-family-beausans;
	font-weight: $font-weight-semibold;
	line-height: $line-height-2x-large;

	background-color: $background-color-grey-light;
	border-radius: $border-radius-l;
	color: $text-color-grey;

	transition: color 0.2s ease-in-out;

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

// ============================================================================
// :: Elements
// ============================================================================
.a-tag__label {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0.8rem 2rem;

	font-family: $font-family-beausans;
	font-size: $font-size;
	font-weight: $font-weight-bold;
	line-height: $line-height-2x-large;

	background-color: $background-color-white;
	border-radius: $border-radius-l;
	color: $text-color;

	box-shadow: $box-shadow;

	transition:
		color 0.2s ease-in-out,
		background-color 0.2s ease-in-out,
		box-shadow 0.2s ease-in-out;

	cursor: pointer;
}

.a-tag__check {
	position: relative;

	display: block;
	width: 1.3rem;
	height: 1.3rem;
	margin-left: 0.7rem;

	&::before,
	&::after {
		content: "";

		position: absolute;

		background: $text-color-grey-medium;

		border-radius: 0.1rem;

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

	&::before {
		top: 50%;
		left: 0;

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

		transform: translate3D(0, -50%, 0) rotate(0);
	}

	&::after {
		content: "";

		top: 50%;
		left: 50%;

		width: 0.2rem;
		height: 100%;

		transform: translate3D(-50%, -50%, 0) rotate(0);
	}
}

.a-tag__input {
	position: absolute;
	left: 0;

	opacity: 0;
}

// ============================================================================
// :: States
// ============================================================================
.a-tag__input:checked {

	& + .a-tag__label {
		color: $text-color-white;
		background: $background-color-green;

		box-shadow: none;
	}

	& + .a-tag__label .a-tag__check {

		&::before,
		&::after {
			background: $text-color-white;
		}

		&::before {
			transform: translate3D(0, -50%, 0) rotate( 135deg );
		}

		&::after {
			transform: translate3D(-50%, -50%, 0) rotate( 135deg );
		}
	}
}

.a-tag__input:hover {

	& + .a-tag__label {
		color: $text-color-green;
	}
}

.a-tag__input:checked:hover {

	& + .a-tag__label {
		color: $text-color-white;
		background: rgba($background-color-green, 0.9);
	}
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-tag--filter {
	padding: 0;

	background-color: transparent;
	border-radius: none;
}