@layer components{.lesson-drawer-open{overflow:hidden}.lesson-drawer-overlay{z-index:10000;cursor:pointer;background-color:#0000004d;position:fixed;inset:0}.lesson-drawer{background-color:#fff;border-inline-start:1px solid #c0cbdf;width:32.5rem}.lesson-drawer .lesson-drawer-top{background-color:#fff;flex-direction:column;height:100%;display:flex}.lesson-drawer h3{margin:0}.lesson-drawer .lesson-drawer-header{border-bottom:1px solid #d7e0ef;align-items:center;height:2.35rem;padding:1.5rem;display:flex}.lesson-drawer .lesson-drawer-header h3{flex:1}.lesson-drawer .lesson-drawer-header .lesson-drawer-actions{gap:1rem}.lesson-drawer .lesson-drawer-header .close-button{cursor:pointer;justify-content:center;align-items:center;padding:.25rem;display:flex;bottom:0}.lesson-drawer .lesson-drawer-header .close-button:hover,.lesson-drawer .lesson-drawer-header .close-button:focus-visible{background-color:#d7e0ef;outline:none}.lesson-drawer .lesson-drawer-header .close-button:focus-visible{outline-offset:2px;outline:2px solid #d7e0ef}.lesson-drawer .lesson-drawer-content{flex:1;padding:1.5rem;overflow-y:auto}.lesson-drawer-panel-overlay{top:0;z-index:10001;height:100dvh;position:fixed;inset-inline-end:0;transform:translate(100%)}.lesson-drawer-panel-overlay[data-state=open]{animation:.3s ease-in-out lesson-drawer-slide-in;transform:translate(0)}.lesson-drawer-panel-overlay[data-state=closed]{transform:translate(100%)}.lesson-drawer-panel-inline{top:calc(var(--spacing-site-header) + .4rem);height:calc(100vh - calc(var(--spacing-site-header) + .4rem));height:calc(100dvh - calc(var(--spacing-site-header) + .4rem));z-index:100;border-inline-start:none;flex-shrink:0;position:sticky}.lesson-drawer-panel-inline[data-state=closed]{display:none}.lesson-drawer-panel-inline[data-state=open]{animation:.3s ease-in-out forwards lesson-drawer-fade-in}}@keyframes lesson-drawer-slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes lesson-drawer-slide-out{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes lesson-drawer-fade-in{0%{opacity:0}to{opacity:1}}@media only screen and (max-width:1024px){@layer components{.lesson-drawer-panel-overlay[data-state=open]{width:100dvw;inset-inline:0}.lesson-drawer-panel-inline[data-state=open]{top:0;z-index:10001;width:100dvw;height:100dvh;position:fixed;inset-inline:0}.lesson-drawer .lesson-drawer-header{height:1.3rem}}}