/*
 * PureCSS.com
 * https://purecss.com/examples/offcanvas-nav/
 * A slide-in navigation panel using a checkbox and CSS translate.
 */

.demo-offcanvas-nav {
	position: relative;
	overflow: hidden;
	min-height: 260px;
}

.demo-offcanvas-nav .offcanvas-check {
		display: none;
	}

.demo-offcanvas-nav .offcanvas-open {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		padding: .55rem 1rem;
		background: var(--accent);
		color: var(--bg);
		border-radius: 8px;
		cursor: pointer;
		font-size: .9rem;
		user-select: none;
		position: relative;
		z-index: 2;
	}

.demo-offcanvas-nav .offcanvas-panel {
		position: absolute;
		top: 0;
		left: 0;
		width: 220px;
		height: 100%;
		background: var(--surface);
		transform: translateX(-100%);
		transition: transform .3s ease;
		z-index: 10;
		padding: 1.5rem 0;
	}

:is(.demo-offcanvas-nav .offcanvas-panel) nav a {
			display: block;
			padding: .65rem 1.25rem;
			color: var(--text);
			font-size: .9rem;
			text-decoration: none;
			transition: background .15s;
		}

:is(:is(.demo-offcanvas-nav .offcanvas-panel) nav a):hover {
				background: rgba(255,255,255,.08);
			}

.demo-offcanvas-nav .offcanvas-check:checked ~ .offcanvas-panel {
		transform: translateX(0);
	}

.demo-offcanvas-nav .offcanvas-close {
		display: block;
		padding: .65rem 1.25rem;
		color: var(--text-muted);
		font-size: .85rem;
		cursor: pointer;
		margin-bottom: .5rem;
		border-bottom: 1px solid rgba(255,255,255,.1);
	}

.demo-offcanvas-nav .offcanvas-overlay {
		position: absolute;
		inset: 0;
		background: rgba(0,0,0,.45);
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s;
		z-index: 9;
	}

.demo-offcanvas-nav .offcanvas-check:checked ~ .offcanvas-overlay {
		opacity: 1;
		pointer-events: auto;
	}