/* -------------------------------------------------------------------------------------------------
 * Drawer Component Styles
 * Block: drawer
 * -----------------------------------------------------------------------------------------------*/

/**
 * Element: trigger - the element that opens the drawer
 */
.drawer__trigger {
  @apply cursor-(--cursor-interactive);

  /**
   * Transitions
   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
   */
  transition:
    transform 250ms var(--ease-out-quart),
    background-color 150ms var(--ease-smooth),
    box-shadow 150ms var(--ease-out);
  @apply motion-reduce:transition-none;

  /* Focus state */
  &:focus-visible:not(:focus),
  &[data-focus-visible="true"] {
    @apply status-focused;
  }

  /* Disabled state */
  &:disabled,
  &[aria-disabled="true"] {
    @apply status-disabled;
  }

  /* Active/pressed state */
  &:active,
  &[data-pressed="true"] {
    transform: scale(0.97);
  }
}

/**
 * Element: backdrop - the overlay behind the drawer
 */
.drawer__backdrop {
  @apply fixed inset-0 z-50;
  @apply flex flex-row items-center justify-center;
  @apply h-(--visual-viewport-height) w-full;

  /* Entering animation */
  &[data-entering="true"] {
    @apply animate-in duration-200 ease-out fade-in-0;
  }

  /* Exiting animation - duration must match content exit (200ms) to avoid flicker */
  &[data-exiting="true"] {
    @apply animate-out duration-200 ease-out fade-out-0;
  }

  /**
   * Reduce Animation
   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
   */
  &[data-exiting="true"],
  &[data-entering="true"] {
    @apply will-change-[opacity];
    @apply motion-reduce:animate-none;
  }
}

/**
 * Modifier: backdrop--transparent
 */
.drawer__backdrop--transparent {
  @apply bg-transparent;
}

/**
 * Modifier: backdrop--opaque
 */
.drawer__backdrop--opaque {
  @apply bg-black/50 dark:bg-black/60;
}

/**
 * Modifier: backdrop--blur
 */
.drawer__backdrop--blur {
  @apply bg-black/50 backdrop-blur-md dark:bg-black/60;
}

/**
 * Element: content - the positioning wrapper for the drawer panel
 */
.drawer__content {
  @apply pointer-events-none;
  @apply h-(--visual-viewport-height) w-full min-w-0;
}

/**
 * Modifier: content--bottom (default)
 * Slides up from the bottom edge
 */
.drawer__content--bottom {
  @apply fixed inset-x-0 bottom-0;
  @apply flex flex-col justify-end;

  /* Entering animation */
  &[data-entering="true"] {
    @apply animate-in duration-300 ease-out slide-in-from-bottom-full;
  }

  /* Exiting animation */
  &[data-exiting="true"] {
    @apply animate-out duration-200 ease-in slide-out-to-bottom-full;
  }
}

/**
 * Modifier: content--top
 * Slides down from the top edge
 */
.drawer__content--top {
  @apply fixed inset-x-0 top-0;
  @apply flex flex-col justify-start;

  /* Entering animation */
  &[data-entering="true"] {
    @apply animate-in duration-300 ease-out slide-in-from-top-full;
  }

  /* Exiting animation */
  &[data-exiting="true"] {
    @apply animate-out duration-200 ease-in slide-out-to-top-full;
  }
}

/**
 * Modifier: content--left
 * Slides in from the left edge
 */
.drawer__content--left {
  @apply fixed inset-y-0 left-0;
  @apply flex flex-row justify-start;

  /* Entering animation */
  &[data-entering="true"] {
    @apply animate-in duration-300 ease-out slide-in-from-left-full;
  }

  /* Exiting animation */
  &[data-exiting="true"] {
    @apply animate-out duration-200 ease-in slide-out-to-left-full;
  }
}

/**
 * Modifier: content--right
 * Slides in from the right edge
 */
.drawer__content--right {
  @apply fixed inset-y-0 right-0;
  @apply flex flex-row justify-end;

  /* Entering animation */
  &[data-entering="true"] {
    @apply animate-in duration-300 ease-out slide-in-from-right-full;
  }

  /* Exiting animation */
  &[data-exiting="true"] {
    @apply animate-out duration-200 ease-in slide-out-to-right-full;
  }
}

/**
 * Reduce animation for all content placements
 */
.drawer__content--bottom,
.drawer__content--top,
.drawer__content--left,
.drawer__content--right {
  &[data-exiting="true"],
  &[data-entering="true"] {
    @apply will-change-transform;
    @apply motion-reduce:animate-none;
  }
}

/**
 * Element: dialog - the drawer panel itself
 */
.drawer__dialog {
  @apply relative;
  @apply flex flex-col;
  @apply bg-overlay shadow-overlay outline-none;
  @apply p-6;
  @apply pointer-events-auto;

  /* Bottom/top placement: full width, auto height */
  &[data-placement="bottom"] {
    @apply w-full rounded-t-2xl;
    @apply max-h-[85vh];
  }

  &[data-placement="top"] {
    @apply w-full rounded-b-2xl;
    @apply max-h-[85vh];
  }

  /* Left/right placement: auto width, full height */
  &[data-placement="left"] {
    @apply h-full rounded-r-2xl;
    @apply w-80 max-w-[85vw] sm:w-96;
  }

  &[data-placement="right"] {
    @apply h-full rounded-l-2xl;
    @apply w-80 max-w-[85vw] sm:w-96;
  }
}

.drawer__dialog--top {
  @apply pb-2;
  .drawer__handle {
    @apply pb-0;
  }
}

/**
 * Element: header - the top section with the title
 */
.drawer__header {
  @apply flex flex-col gap-3;
  @apply mb-0;
}

/**
 * Element: heading - the main title text
 */
.drawer__heading {
  @apply align-middle;
  @apply text-base font-medium text-foreground;
}

/**
 * Element: body - the main content area
 * touch-action: pan-y allows vertical scrolling while the dialog captures drag gestures
 */
.drawer__body {
  @apply min-h-0 flex-1;
  @apply text-sm leading-[1.43] text-muted;
  @apply -m-[3px] my-0 p-[3px];
  @apply overflow-y-auto overscroll-contain;
  -webkit-overflow-scrolling: touch;
}

/**
 * Element: footer - the bottom action section
 */
.drawer__footer {
  @apply flex flex-row items-center justify-end gap-2;
  @apply mt-0;
}

/**
 * Element: handle - visual drag handle indicator
 */
.drawer__handle {
  @apply flex items-center justify-center;
  @apply pb-2;

  /* The handle bar */
  & > [data-slot="drawer-handle-bar"] {
    @apply h-1 w-9 rounded-full;
    @apply bg-separator;
  }
}

/**
 * Element: close-trigger - the close button
 */
.drawer__close-trigger {
  @apply absolute top-4 right-4;
}

/**
 * Elements Spacing
 */
.drawer__header + .drawer__body {
  @apply mt-2;
}

.drawer__header + .drawer__footer {
  @apply mt-5;
}

.drawer__body + .drawer__footer {
  @apply mt-5;
}

.drawer__handle + .drawer__header {
  @apply mt-0;
}

.drawer__handle + .drawer__body {
  @apply mt-0;
}