/* public/ui/drawer.css */

/* começa abaixo do header e mantém header clicável */
:root {
   --drawer-sm: 420px;
   --drawer-md: 560px;
   --drawer-lg: 720px;
   --drawer-xl: 860px;
}

.drawer {
   position: fixed;
   inset: var(--header-h) 0 0 0;
   z-index: 2050;

   /* largura padrão, caso nenhuma classe seja informada */
   --drawer-w: var(--drawer-md);
}

.drawer[hidden] {
   display: none;
}

.drawer__backdrop {
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, .45);
   backdrop-filter: blur(1px);
}

.drawer__panel {
   position: absolute;
   top: 0;
   right: 0;
   height: calc(100dvh - var(--header-h));
   width: min(var(--drawer-w), 100vw);

   background: var(--panel);
   border-left: 1px solid var(--border);
   box-shadow: var(--shadow);

   display: flex;
   flex-direction: column;
}

.drawer__header {
   padding: 14px 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   border-bottom: 1px solid var(--border);
   background: color-mix(in oklab, var(--panel), #fff 1%);
}

.drawer__title {
   font-size: 1.12rem;
   font-weight: 700;
   letter-spacing: -0.01em;
}

.drawer__close {
   width: 40px;
   height: 40px;
   border-radius: 12px;
   border: 1px solid var(--border);
   background: transparent;
   cursor: pointer;
   display: grid;
   place-items: center;
   color: var(--text);
}

.drawer__close:hover {
   background: var(--hover);
   border-color: transparent;
}

.drawer__body {
   padding: 16px;
   overflow: auto;
   min-height: 0;
}

.drawer__footer {
   padding: 14px 16px;
   display: flex;
   gap: 10px;
   justify-content: flex-end;
   border-top: 1px solid var(--border);
   background: color-mix(in oklab, var(--panel), #fff 1%);
}

/* tamanhos utilitários */
.drawer-sm {
   --drawer-w: var(--drawer-sm);
}

.drawer-md {
   --drawer-w: var(--drawer-md);
}

.drawer-lg {
   --drawer-w: var(--drawer-lg);
}

.drawer-xl {
   --drawer-w: var(--drawer-xl);
}

@media (max-width: 720px) {
   .drawer__panel {
      width: 100vw;
      border-left: 0;
   }
}