/* Generic dropdown component */
/* =========================== */
/*
  A self-contained, reusable dropdown — no Bootstrap JS or CSS dependency
  (only --bs-* design tokens are used, for theme consistency).

  Markup:
    <div class="pg-dropdown" data-controller="dropdown">
      <button class="pg-dropdown-toggle pg-dropdown-toggle--icon"
              data-dropdown-target="toggle"
              data-action="click->dropdown#toggle"
              aria-expanded="false">…</button>
      <ul class="pg-menu" data-dropdown-target="menu">
        <li><a class="pg-menu-item" href="…">…</a></li>
        <li><hr class="pg-menu-divider"></li>
      </ul>
    </div>

  The dropdown controller toggles `.pg-menu--open` and `aria-expanded`.
  Variants:
    .pg-dropdown-toggle--icon   icon-only round button with a soft highlight
    .pg-dropdown-toggle--field  bordered "form field" style text button
    .pg-dropdown-toggle--caret  appends a CSS caret
    .pg-menu--end               right-aligns the menu under the toggle
*/

/* Container */
.pg-dropdown {
  position: relative;
  display: inline-block;
}

/* Menu panel */
.pg-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;

  display: none;
  min-width: 10rem;
  margin: 0.125rem 0 0;
  padding: 0.5rem 0;

  list-style: none;

  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color-translucent, var(--bs-border-color));
  border-radius: var(--bs-border-radius);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.pg-menu.pg-menu--open {
  display: block;
}

/* Right-align under the toggle */
.pg-menu--end {
  left: auto;
  right: 0;
}

/* Menu items */
.pg-menu-item {
  display: block;
  width: 100%;

  padding: 0.25rem 1rem;

  font-weight: 400;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;

  color: var(--bs-body-color);
  background-color: transparent;
  border: 0;
  cursor: pointer;

  &:hover,
  &:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-tertiary-bg);
  }
}

.pg-menu-item--active {
  color: #fff;
  background-color: var(--bs-primary);

  &:hover,
  &:focus {
    color: #fff;
    background-color: var(--bs-primary);
  }
}

.pg-menu-item--danger {
  color: var(--bs-danger);

  &:hover,
  &:focus {
    color: var(--bs-danger);
  }
}

/* Divider */
.pg-menu-divider {
  height: 0;
  margin: 0.5rem 0;
  overflow: hidden;

  border: 0;
  border-top: 1px solid var(--bs-border-color-translucent, var(--bs-border-color));
  opacity: 1;
}

/* Toggle button — base reset (no Bootstrap .btn) */
.pg-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  padding: 0;

  font: inherit;
  color: inherit;

  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;

  &:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--bs-primary) 50%, transparent);
    outline-offset: 2px;
  }
}

/* Icon variant: round, icon-only, soft theme-aware highlight.
   Override --pg-dd-icon-accent per context (defaults to the current text colour). */
.pg-dropdown-toggle--icon {
  --pg-dd-icon-accent: currentColor;

  justify-content: center;

  width: 2.25rem;
  height: 2.25rem;

  color: var(--pg-dd-icon-accent);
  border-radius: 50%;

  transition: background-color 0.15s ease;

  /* Highlight while the menu is open (works on touch — clears when it closes) */
  &:focus-visible,
  &[aria-expanded="true"] {
    background-color: color-mix(in oklab, var(--pg-dd-icon-accent) 15%, transparent);
  }

  /* Hover highlight only on hover-capable pointers, so a touch tap doesn't
     leave a sticky highlight after the menu closes */
  @media (hover: hover) {
    &:hover {
      background-color: color-mix(in oklab, var(--pg-dd-icon-accent) 15%, transparent);
    }
  }

  &:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem color-mix(in oklab, var(--pg-dd-icon-accent) 30%, transparent);
  }
}

/* Icon + caret: the icon button gains a dropdown caret, so it widens from a
   fixed circle into a pill to fit the caret while keeping the soft highlight. */
.pg-dropdown-toggle--icon.pg-dropdown-toggle--caret {
  width: auto;
  gap: 0.15rem;
  padding: 0 0.5rem 0 0.6rem;
  border-radius: 999px;
}

/* Field variant: bordered text button that reads like a form control */
.pg-dropdown-toggle--field {
  justify-content: space-between;

  padding: 0.25rem 0.6rem;

  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);

  transition: background-color 0.15s ease, border-color 0.15s ease;

  @media (hover: hover) {
    &:hover {
      background-color: var(--bs-tertiary-bg);
    }
  }
}

/* Caret: generic CSS triangle, follows the label */
.pg-dropdown-toggle--caret::after {
  content: "";

  display: inline-block;
  margin-left: 0.35em;

  vertical-align: 0.15em;
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}