/**
 * Shared mobile bottom navigation. This asset is enqueued only when its
 * component is rendered, so the body offset cannot affect excluded pages.
 */

.mc-mobile-bottom-nav {
	display: none;
}

@media (max-width: 63.999rem) {
	body {
		padding-block-end: calc(4.25rem + env(safe-area-inset-bottom));
	}

	.mc-mobile-bottom-nav {
		position: fixed;
		z-index: 40;
		inset-inline: 0;
		inset-block-end: 0;
		display: block;
		padding-block-end: env(safe-area-inset-bottom);
		border-block-start: 1px solid var(--mc-color-border);
		background: var(--mc-color-surface);
		box-shadow: 0 -0.25rem 1rem rgb(0 0 0 / 8%);
	}

	.mc-mobile-bottom-nav ul {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		width: min(100%, 36rem);
		margin: 0 auto;
		padding: 0;
		list-style: none;
	}

	.mc-mobile-bottom-nav__item {
		position: relative;
		display: grid;
		width: 100%;
		min-height: 4.25rem;
		padding: var(--mc-space-xs);
		border: 0;
		background: transparent;
		color: var(--mc-color-text-secondary);
		font: inherit;
		font-size: var(--mc-font-size-xs);
		line-height: var(--mc-line-height-control);
		text-align: center;
		text-decoration: none;
		place-content: center;
		place-items: center;
		gap: 0.15rem;
	}

	.mc-mobile-bottom-nav__item svg {
		width: 1.35rem;
		height: 1.35rem;
	}

	.mc-mobile-bottom-nav__item.is-current {
		color: var(--mc-color-primary);
		font-weight: var(--mc-font-weight-semibold);
	}

	.mc-mobile-bottom-nav__item:focus-visible {
		outline: 2px solid var(--mc-color-primary);
		outline-offset: -2px;
	}

	.mc-mobile-bottom-nav__item.is-disabled {
		cursor: default;
		opacity: 0.55;
	}

	.mc-mobile-bottom-nav__count {
		position: absolute;
		inset-block-start: 0.35rem;
		inset-inline-start: calc(50% + 0.35rem);
		display: grid;
		min-width: 1.1rem;
		height: 1.1rem;
		padding-inline: 0.2rem;
		border-radius: var(--mc-radius-full);
		background: var(--mc-color-primary);
		color: var(--mc-color-button-text);
		font-size: 0.625rem;
		line-height: 1;
		place-items: center;
	}

	.mc-mobile-bottom-nav__count[hidden] {
		display: none;
	}
}