/* ==========================================================================
   ORGANISMS / drawer / drawer.css
   --------------------------------------------------------------------------
   HTML PATTERN:
     <button data-drawer-open="drawer-filter">Filter</button>

     <div class="drawer-overlay" id="drawer-filter" hidden>
       <aside class="drawer drawer-right" aria-label="Filter" role="dialog"
              aria-modal="true" aria-labelledby="drawer-filter-title">
         <div class="drawer-header">
           <h2 class="drawer-title" id="drawer-filter-title">Filter</h2>
           <button class="modal-close" data-drawer-close aria-label="Tutup"><!-- X --></button>
         </div>
         <div class="drawer-body">...</div>
         <div class="drawer-footer">
           <button class="btn btn-secondary btn-full" data-drawer-close>Reset</button>
           <button class="btn btn-primary btn-full">Terapkan</button>
         </div>
       </aside>
     </div>
   ========================================================================== */

.drawer-overlay {
  position:         fixed;
  inset:            0;
  z-index:          var(--z-modal);
  background-color: var(--color-bg-overlay);
  animation:        ds-fade-in var(--duration-normal) var(--ease-default) both;
}

.drawer {
  position:         absolute;
  background-color: var(--color-bg-surface);
  border:           1px solid var(--color-border-default);
  box-shadow:       var(--shadow-2xl);
  display:          flex;
  flex-direction:   column;
  max-height:       100dvh;
  overflow:         hidden;
}

/* Positions */
.drawer-right {
  top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 90vw;
  border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
  animation: drawer-slide-right var(--duration-moderate) var(--ease-spring) both;
}
.drawer-left {
  top: 0; left: 0; bottom: 0;
  width: 400px; max-width: 90vw;
  border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0;
  animation: drawer-slide-left var(--duration-moderate) var(--ease-spring) both;
}
.drawer-bottom {
  bottom: 0; left: 0; right: 0;
  height: auto; max-height: 85dvh;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  animation: ds-slide-up var(--duration-moderate) var(--ease-spring) both;
}
.drawer-top {
  top: 0; left: 0; right: 0;
  height: auto; max-height: 85dvh;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
  animation: ds-slide-down var(--duration-moderate) var(--ease-spring) both;
}

@keyframes drawer-slide-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes drawer-slide-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* Closing */
.drawer-overlay.is-closing { animation: ds-fade-out var(--duration-normal) var(--ease-in) both; }
.drawer-overlay.is-closing .drawer-right  { animation: drawer-close-right var(--duration-normal) var(--ease-in) both; }
.drawer-overlay.is-closing .drawer-left   { animation: drawer-close-left  var(--duration-normal) var(--ease-in) both; }
.drawer-overlay.is-closing .drawer-bottom { animation: ds-slide-up   var(--duration-normal) var(--ease-in) reverse both; }

@keyframes drawer-close-right { to { transform: translateX(100%); } }
@keyframes drawer-close-left  { to { transform: translateX(-100%); } }

/* Header, Body, Footer — reuse modal styles */
.drawer-header {
  display:     flex;
  align-items: flex-start;
  justify-content: space-between;
  gap:         var(--size-400);
  padding:     var(--size-600);
  border-bottom: 1px solid var(--color-border-default);
  flex-shrink: 0;
}
.drawer-title {
  font-size:   var(--text-heading-sm-size);
  font-weight: var(--font-weight-bold);
  color:       var(--color-text-primary);
  margin:      0;
}
.drawer-body {
  flex:       1;
  overflow-y: auto;
  padding:    var(--size-600);
}
.drawer-footer {
  display:     flex;
  gap:         var(--size-300);
  padding:     var(--size-400) var(--size-600) var(--size-600);
  border-top:  1px solid var(--color-border-default);
  flex-shrink: 0;
}