@import '../custom.variables';

$mobileMargin: 16px;

dialog .contents {
	@include media-breakpoint-down(md) {
		margin-left: -$mobileMargin;
		margin-right: -$mobileMargin;
	}
}

.menu-item {
	display: block;
	color: var(--bs-dark-text-emphasis);
	background-color: var(--bs-body-bg);
	text-decoration: none;
	outline: none;

	&:hover,
	&:focus-visible {
		background-color: var(--bs-secondary-bg-subtle);
	}
}

.menu-item-sidenav {
	padding: 0.1rem 0.5rem;
	border: 0px solid var(--bs-body-bg);
	border-width: 2px 0;

	@media (min-width: 768px) {
		border-radius: 5px;
	}

	&.active {
		color: var(--bs-dark);
		background-color: var(--bs-light);
		font-weight: 500;
	}

	@include media-breakpoint-down(md) {
		&:focus {
			border-color: var(--bs-primary-text-emphasis-border-subtle);
		}
	}

	@include media-breakpoint-down(md) {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		padding-left: $mobileMargin * 2;
		padding-right: $mobileMargin * 2;
	}
}

.menu-item-toc {
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--bs-secondary);
	border-width: 0 0 0 2px;

	&.active {
		border-color: var(--bs-primary-text-emphasis);
		border-left-color: var(--bs-primary-text-emphasis);
	}
}

.toc-h2 {
	padding-left: 1rem;
}

.toc-h3 {
	padding-left: 1.5rem;
}
