/* ==========================================================================
   Base dropdown styles
   ========================================================================== */

.dropdown {
  @apply flex flex-col gap-1;
}

.dropdown__trigger {
  @apply inline-block;
  /* Only visible when using a custom trigger  - not passing "Button" as a child - hence we use some button styles (custom trigger) */
  @apply outline-none;
  /**
   * 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 transform-gpu motion-reduce:transition-none;

  /* Cursor */
  cursor: var(--cursor-interactive);

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

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

  /* Pending state */
  &[data-pending="true"] {
    @apply status-pending;
  }

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

/* Similar to select popover styles */
.dropdown__popover {
  @apply max-w-[48svw] origin-(--trigger-anchor-point) scroll-py-1 scrollbar overflow-y-auto overscroll-contain bg-overlay p-0 text-sm will-change-transform md:min-w-55;
  border-radius: min(32px, var(--radius-3xl));
  box-shadow: var(--shadow-overlay);

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

  /* Entering animations */
  &[data-entering="true"] {
    @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-90;

    /* Placement-specific translations */
    &[data-placement="top"] {
      @apply slide-in-from-bottom-1;
    }

    &[data-placement="bottom"] {
      @apply slide-in-from-top-1;
    }

    &[data-placement="left"] {
      @apply slide-in-from-right-1;
    }

    &[data-placement="right"] {
      @apply slide-in-from-left-1;
    }
  }

  /* Exiting animations */
  &[data-exiting="true"] {
    @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out;
  }

  &[data-exiting="true"],
  &[data-entering="true"] {
    @apply transition-[opacity,transform] will-change-[opacity,transform];
  }

  /* Arrow styling */
  & [data-slot="popover-overlay-arrow"] {
    fill: var(--overlay);
  }

  /* Arrow rotation based on placement */
  &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
    rotate: 180deg;
  }

  &[data-placement="left"] [data-slot="popover-overlay-arrow"] {
    rotate: -90deg;
  }

  &[data-placement="right"] [data-slot="popover-overlay-arrow"] {
    rotate: 90deg;
  }

  /* Menu styles */
  [data-slot="dropdown-menu"] {
    @apply p-1.5 outline-none;
  }

  [data-slot="menu-item"] {
    @apply px-2.5;
  }
}

.dropdown__menu {
  @apply relative flex w-full flex-col gap-0.5 overflow-clip p-1;

  /* This makes the separator take up 94% of the width and be centered */
  [data-slot="separator"] {
    @apply ml-[3%] w-[94%];
  }
}