/*
 * PureCSS.com
 * https://purecss.com/examples/sticky-sidebar/
 * A sidebar that sticks to the viewport while scrolling using position: sticky.
 */

.demo-sticky-sidebar .sticky-layout {
		display: grid;
		grid-template-columns: 180px 1fr;
		gap: 1.5rem;
		height: 260px;
		overflow-y: auto;
	}

.demo-sticky-sidebar .sticky-nav {
		position: sticky;
		top: 0;
		align-self: start;
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		padding: .75rem;
		height: fit-content;
	}

:is(.demo-sticky-sidebar .sticky-nav) h3 {
			font-size: .75rem;
			text-transform: uppercase;
			letter-spacing: .08em;
			color: var(--text-muted);
			margin-bottom: .5rem;
		}

:is(.demo-sticky-sidebar .sticky-nav) ul {
			list-style: none;
			display: flex;
			flex-direction: column;
			gap: .1rem;
		}

:is(.demo-sticky-sidebar .sticky-nav) li a {
			display: block;
			padding: .4rem .6rem;
			border-radius: 6px;
			color: var(--text);
			text-decoration: none;
			font-size: .875rem;
			transition: background .15s, color .15s;
		}

:is(:is(.demo-sticky-sidebar .sticky-nav) li a):hover {
				background: var(--accent-dim);
				color: var(--accent);
			}

.active:is(:is(.demo-sticky-sidebar .sticky-nav) li a) {
				background: var(--accent-dim);
				color: var(--accent);
				font-weight: 600;
			}

.demo-sticky-sidebar .sticky-content {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

.demo-sticky-sidebar .content-block {
		background: var(--surface);
		border: 1px solid var(--border);
		border-radius: var(--radius);
		padding: 1rem;
	}

:is(.demo-sticky-sidebar .content-block) h4 {
			font-size: .9rem;
			margin-bottom: .4rem;
			color: var(--accent);
		}

:is(.demo-sticky-sidebar .content-block) p {
			font-size: .82rem;
			color: var(--text-muted);
			line-height: 1.5;
		}