*/ /* Trigger button — variants */ .codlab-drawer-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border: 0; font: inherit; font-weight: 600; cursor: pointer; line-height: 1; transition: background .15s ease, color .15s ease, transform .12s ease; } .codlab-drawer-trigger:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--codlab-brand-primary, #CA1414); } .codlab-drawer-trigger:active { transform: scale(.97); } .codlab-drawer-trigger--icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; } .codlab-drawer-trigger--primary { background: var(--codlab-brand-primary, #CA1414); color: #FFFEFF; } .codlab-drawer-trigger--secondary { background: var(--codlab-brand-text, #1D1B20); color: #FFFEFF; } .codlab-drawer-trigger--ghost { background: transparent; color: var(--codlab-brand-text, #1D1B20); border: 1px solid currentColor; } /* Host — covers the viewport */ .codlab-drawer-host { --codlab-drawer-shadow: 0 16px 40px rgba(29, 27, 32, .24); --codlab-drawer-transition: 280ms cubic-bezier(.2, .8, .2, 1); position: fixed; inset: 0; z-index: 9999; display: block; pointer-events: none; } .codlab-drawer-host[hidden] { display: none; } .codlab-drawer-host.is-open { pointer-events: auto; } /* Backdrop */ .codlab-drawer__backdrop { position: absolute; inset: 0; opacity: 0; transition: opacity var(--codlab-drawer-transition); pointer-events: none; } .codlab-drawer-host.is-open .codlab-drawer__backdrop { opacity: 1; pointer-events: auto; } /* Panel — base (slide animation) */ .codlab-drawer__panel { position: absolute; display: flex; flex-direction: column; background: #FFFEFF; color: var(--codlab-brand-text, #1D1B20); box-shadow: var(--codlab-drawer-shadow); transition: transform var(--codlab-drawer-transition), opacity var(--codlab-drawer-transition); will-change: transform, opacity; overflow: hidden; } .codlab-drawer__panel:focus { outline: none; } /* Position variants */ .codlab-drawer__panel--left { top: 0; left: 0; transform: translateX(-100%); } .codlab-drawer__panel--right { top: 0; right: 0; transform: translateX(100%); } .codlab-drawer__panel--top { top: 0; left: 0; right: 0; transform: translateY(-100%); } .codlab-drawer__panel--bottom { bottom: 0; left: 0; right: 0; transform: translateY(100%); } .codlab-drawer-host.is-open .codlab-drawer__panel--left, .codlab-drawer-host.is-open .codlab-drawer__panel--right, .codlab-drawer-host.is-open .codlab-drawer__panel--top, .codlab-drawer-host.is-open .codlab-drawer__panel--bottom { transform: translate(0, 0); } /* Fade animation override */ .codlab-drawer-host[data-animation="fade"] .codlab-drawer__panel { transform: none; opacity: 0; } .codlab-drawer-host[data-animation="fade"].is-open .codlab-drawer__panel { opacity: 1; } /* Push animation: same slide on the panel; push handled by JS. */ .codlab-drawer-host[data-animation="push"] .codlab-drawer__panel { box-shadow: none; } /* Header */ .codlab-drawer__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; border-bottom: 1px solid rgba(29, 27, 32, .08); flex-shrink: 0; } .codlab-drawer__title { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: .01em; } .codlab-drawer__close { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: inherit; border-radius: 50%; cursor: pointer; transition: background .15s ease; } .codlab-drawer__close:hover { background: rgba(29, 27, 32, .06); } .codlab-drawer__close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--codlab-brand-primary, #CA1414); } /* Body */ .codlab-drawer__body { flex: 1 1 auto; overflow: auto; padding: 20px 24px; -webkit-overflow-scrolling: touch; } .codlab-drawer__body .codlab-drawer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .codlab-drawer__body .codlab-drawer__menu a { display: block; padding: 12px 8px; border-radius: 6px; color: inherit; text-decoration: none; font-weight: 500; } .codlab-drawer__body .codlab-drawer__menu a:hover, .codlab-drawer__body .codlab-drawer__menu a:focus-visible { background: rgba(202, 20, 20, .06); color: var(--codlab-brand-primary, #CA1414); outline: none; } /* Lock body scroll while drawer is open. */ html.codlab-drawer-active, html.codlab-drawer-active body { overflow: hidden; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .codlab-drawer__panel, .codlab-drawer__backdrop, body { transition: none !important; } } /* Mobile sizing safety: top/bottom drawers cap at 90vh. */ @media (max-width: 767px) { .codlab-drawer__panel--left, .codlab-drawer__panel--right { max-width: 92vw !important; } .codlab-drawer__panel--top, .codlab-drawer__panel--bottom { max-height: 90vh !important; } }