/* =========================
   Dropdown
   Figma: Dropdown / Select menu.
========================= */

@use "../kit-deps" as *;

.dropdown {
  position: relative;
  display: inline-flex;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 200px;
  max-width: 320px;
  margin-top: $space-1;
  padding: $space-2 0;
  border: $border-width-base $border-style-base $border-color-muted;
  border-radius: $radius-md;
  background-color: $surface-panel-muted;
  box-shadow: 0 8px 24px rgba($neutral-900, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition:
    opacity $motion-fast $motion-ease,
    visibility $motion-fast $motion-ease,
    transform $motion-fast $motion-ease;

  &.is-open,
  .dropdown.is-open & {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  &[data-placement="right"] {
    left: auto;
    right: 0;
  }

  &[data-placement="top"] {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: $space-1;
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: $space-3;
  width: 100%;
  padding: $space-3 $space-4;
  border: 0;
  background: transparent;
  color: $neutral-900;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background-color $motion-base $motion-ease;

  &:hover:not(:disabled):not(.is-disabled) {
    background-color: rgba($neutral-900, 0.04);
  }

  &:focus-visible {
    @include focus_ring;
    outline-offset: -2px;
  }

  &:disabled,
  &.is-disabled {
    color: $neutral-400;
    cursor: not-allowed;
  }

  &.is-active {
    background-color: rgba($mint-500, 0.12);
  }

  .dropdown-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: $neutral-600;
    flex-shrink: 0;
  }
}

.dropdown-divider {
  height: 1px;
  margin: $space-2 $space-4;
  background-color: $border-color-muted;
}