/* Offcanvas for light */
html[data-bs-theme="light"] .offcanvas,
html[data-bs-theme="light"] .offcanvas-header,
html[data-bs-theme="light"] .offcanvas-body {
	background-color: var(--navbarbackground) !important;
	color: var(--white) !important;
}

	html[data-bs-theme="light"] .offcanvas a,
	html[data-bs-theme="light"] .offcanvas .nav-link,
	html[data-bs-theme="light"] .offcanvas .dropdown-item,
	html[data-bs-theme="light"] .offcanvas button,
	html[data-bs-theme="light"] .offcanvas .btn {
		color: var(--white) !important;
		background: transparent !important;
	}

		html[data-bs-theme="light"] .offcanvas .nav-link.active {
			background-color: var(--nav-link-background-active) !important;
			color: var(--white) !important;
		}

		html[data-bs-theme="light"] .offcanvas a:hover,
		html[data-bs-theme="light"] .offcanvas .nav-link:hover,
		html[data-bs-theme="light"] .offcanvas .dropdown-item:hover {
			background-color: var(--nav-link-background-hover) !important;
			color: var(--nav-link-hover-color) !important;
		}

	html[data-bs-theme="light"] .offcanvas .btn-close {
		filter: invert(1) brightness(2);
	}

	html[data-bs-theme="light"] .offcanvas .scroll-btn-offcanvas {
		background: rgba(255,255,255,0.06) !important;
		border-color: #5a6268 !important;
		color: var(--white) !important;
	}

		html[data-bs-theme="light"] .offcanvas .scroll-btn-offcanvas:hover {
			background: #5a6268 !important;
		}
/* Offcanvas for dark (mirror light behaviour) */
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .offcanvas-header,
html[data-bs-theme="dark"] .offcanvas-body {
	background-color: var(--navbarbackground) !important;
	color: var(--white) !important;
}

	html[data-bs-theme="dark"] .offcanvas a,
	html[data-bs-theme="dark"] .offcanvas .nav-link,
	html[data-bs-theme="dark"] .offcanvas .dropdown-item,
	html[data-bs-theme="dark"] .offcanvas button,
	html[data-bs-theme="dark"] .offcanvas .btn {
		color: var(--white) !important;
		background: transparent !important;
	}

		html[data-bs-theme="dark"] .offcanvas .nav-link.active {
			background-color: var(--nav-link-background-active) !important;
			color: var(--white) !important;
		}

		html[data-bs-theme="dark"] .offcanvas a:hover,
		html[data-bs-theme="dark"] .offcanvas .nav-link:hover,
		html[data-bs-theme="dark"] .offcanvas .dropdown-item:hover {
			background-color: var(--nav-link-background-hover) !important;
			color: var(--nav-link-hover-color) !important;
		}

	html[data-bs-theme="dark"] .offcanvas .btn-close {
		filter: invert(1) brightness(2);
	}

	html[data-bs-theme="dark"] .offcanvas .scroll-btn-offcanvas {
		background: rgba(255,255,255,0.06) !important;
		border-color: #5a6268 !important;
		color: var(--white) !important;
	}

		html[data-bs-theme="dark"] .offcanvas .scroll-btn-offcanvas:hover {
			background: #5a6268 !important;
		}

.nav-scroller {
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
}

	.nav-scroller::-webkit-scrollbar {
		display: none;
	}

.offcanvasScrollArea {
	display: flex;
	gap: .25rem;
	align-items: center;
	padding: 0 .25rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	white-space: nowrap;
	height: var(--offcanvas-scroll-area-height);
	padding: 0 28px;
}

/* Offcanvas buttons (absolute) */
.scroll-btn-offcanvas {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: var(--scroll-btn-width) !important;
	height: var(--scroll-btn-height) !important;
	z-index: 20;
}

	.scroll-btn-offcanvas.left {
		left: -4px;
		width: var(--scroll-btn-width) !important;
	}

	.scroll-btn-offcanvas.right {
		right: -4px;
		width: var(--scroll-btn-width) !important;
	}

.offcanvas .btn-close, .offcanvas .btn-close.btn-close-white {
	background-image: none !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	filter: none !important;
	background: transparent !important;
	border: 0;
	width: 1.25rem;
	height: 1.25rem;
	padding: 0;
	position: relative;
}

	.offcanvas .btn-close::before,
	.offcanvas .btn-close::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 14px;
		height: 2px;
		background: #fff;
		transform-origin: center;
		border-radius: 1px;
		pointer-events: none;
	}

	.offcanvas .btn-close::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.offcanvas .btn-close::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}