.c-mobile-nav {
	display: flex;
	min-height: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	overflow: hidden;
	position: relative;

	&__slide {
		width: 100vw;
		min-height: 100%;
		padding: var(--spacing-5);
		overflow-y: auto;
		flex-shrink: 0;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transition: transform var(--duration-normal) var(--cbuc-cubic-out);
		transform: translateX(0);
		will-change: transform;
	}

	&__back-button {
		width: 100%;
		padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) 0;
		margin-bottom: var(--spacing-2);
		color: var(--color-secondary-600);

		&:hover {
			background-color: color-mix(in srgb, var(--color-secondary-100) 20%, transparent);
		}

		&:active {
			background-color: color-mix(in srgb, var(--color-secondary-200) 20%, transparent);;
		}
	}

	&__heading-button {
		--a11-focus-border-width: 2px;

		margin-bottom: var(--spacing-4);
		padding: var(--spacing-3);
		font-weight: var(--font-weight-semibold);
		color: var(--color-primary-500);
		border-bottom: var(--a11-focus-border-width) solid var(--color-primary-500);
		border-radius: 0;

		.c-icon--chevron-right {
			margin-left: auto;
		}

		&:hover {
			background-color: var(--color-primary-100);
		}

		&:active {
			background-color: var(--color-primary-200);
		}
	}

	&__items {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-2);
	}

	&__item {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		padding: var(--spacing-3);
		text-align: left;
		color: var(--color-text-primary);
		text-decoration: none;
		transition:
			background-color var(--duration-normal) var(--cbuc-cubic-out),
			color var(--duration-normal) var(--cbuc-cubic-out),
			border-color var(--duration-ultra-fast) var(--smoothstep),
			box-shadow var(--duration-ultra-fast) var(--smoothstep);

		&:hover {
			background-color: var(--color-primary-100);
		}

		&:active {
			background-color: var(--color-primary-200);
		}

		&.is-active {
			color: var(--color-primary-500);
			font-weight: var(--font-weight-semibold);
		}

		&--truncated {
			display: inline-flex;
			width: auto;
		}

		.c-icon--chevron-right {
			margin-left: auto;
		}
	}
}
