@layer global {
	.embedded-messaging {
		/* stylelint-disable */
		--eswButtonBottom: 120px;
		--eswButtonRight: 26px;
		/* stylelint-enable */
	}

	.observe-position {
		block-size: 1px;
		inline-size: 1px;
		left: 0;
		position: absolute;
		top: 100px;
		visibility: hidden;
	}

	.back-to-top {
		align-content: start;
		aspect-ratio: 1/1;
		background-color: var(--color-red-1);
		block-size: 56px;
		bottom: 190px;
		border-radius: 50%;
		color: var(--color-white);
		display: none;
		font-size: var(--body-font-size-xxs);
		letter-spacing: .15em;
		line-height: 1;
		opacity: 0;
		padding-block-start: 6px;
		position: fixed;
		right: 26px;
		text-transform: uppercase;
		transition: opacity var(--transition-time) ease-in-out, display var(--transition-time) allow-discrete;
        z-index: 2;

		&[aria-hidden='false'] {
			display: grid;
			opacity: 1;

			@starting-style {
				opacity: 0;
			}
		}

		&::before {
			color: currentColor;
			content: '\e316';
			font-family: var(--material-icons);
			font-size: 1.5rem;
		}
	}

	/* Breadcrumbs */
	.breadcrumbs {
		--link-color: var(--color-gray-1);

		color: var(--link-color);

		& ul {
			inline-size: 100%;
			margin-inline: auto;
			max-inline-size: min(100% - var(--container-gutter, 0.9375rem) * 2, var(--max-width, 80rem));
		}

		& li {
			align-items: center;
			display: flex;
			gap: 10px;

			&[aria-current='page'] {
				font-weight: 700;
			}
		}
	}
	
	.search-form {
		align-items: center;
		display: grid;
		grid-template-columns: 1fr repeat(2, auto);

		@media (width >= 75em) {
			max-width: 715px;
			width: 100%;
		}

		&:has(input:not(:placeholder-shown):valid) {
			--search-clear-display: block;
		}

		& label {
			clip: rect(0 0 0 0); 
			clip-path: inset(50%);
			height: 1px;
			overflow: hidden;
			position: absolute;
			white-space: nowrap; 
			width: 1px;
		}

		& input {
			background-color: var(--color-gray-2);
			border: none;
			border-radius: 5px;
			grid-column: 1 / -1;
			grid-row: 1;
			inline-size: 100%;
			padding: 15px 90px 15px 20px;

			&:focus {
				box-shadow:
					0 0 0 1px var(--color-black),
					inset 0 0 0 2px var(--color-teal),
					inset 0 0 0 4px var(--color-white);
				outline: none;
			}

			&::-webkit-search-cancel-button {
				display: none;
			}
		}

		& button {
			grid-row: 1;

			&::before {
				content: var(--button-icon);
				font-family: var(--material-icons);
				font-size: var(--size-24);
			}
		}
	}

	.search-clear {
		--button-icon: '\e5cd';

		display: var(--search-clear-display, none);
		grid-column: 2;
	}

	.search-submit {
		--button-icon: '\e8b6';

		grid-column: 3;
	}

	.skeleton {
		animation: 1.2s ease-in-out 0.0001s infinite normal none running shimmer;
		background-color: #eee;
		background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);
		background-repeat: no-repeat;
		background-size: 200px 100%;
		border-radius: 4px;
	}

	@keyframes shimmer {
		0% {
			background-position: -200px 0;
		}
	
		100% {
			background-position: calc(200px + 100%) 0;
		}
	}
}