// ============================================================================
// :: Breadcrumbs
// ============================================================================
// Styling for Breadcrumbs
.a-breadcrumb {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 0.5rem 1rem;

	font-family: $font-family-beausans;
	font-weight: $font-weight-semibold;
	line-height: 1.5rem;

	border-radius: 1.2rem;

	background-color: $background-color-white;
	color: $text-color;

	transition:
		background-color 0.2s ease-in-out,
		color 0.2s ease-in-out,
		transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

	&::before {
		margin-right: 0.6rem;
		margin-bottom: 0.1rem;

		font-size: $font-size-2x-small;

		color: $text-color-primary;

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

	&:hover,
	&:focus:not(.focus-visible) {
		color: $text-color-primary;

		transform: translateX(1rem);

		&::before {
			color: $text-color-primary;
		}
	}

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

// ============================================================================
// :: Modifiers
// ============================================================================
.a-breadcrumb--light {
	color: $text-color-white;
	background-color: rgba($background-color-white, 0.1);

	&::before {
		color: $text-color-white;
	}
}

.a-breadcrumb--inverted {
	background-color: $background-color-grey-extra-light;
	color: $text-color;
}