/* ══════════════════════════════════════════════════════════════════════════
   Dropdown (#22) — WAI-ARIA APG Menu Button
   Тригер: aria-haspopup="menu" + aria-expanded
   Меню: role="menu" + role="menuitem"
   Стани тригера: default | hover | focus-visible | open
   Стани пункту: default | hover | focus | disabled (aria-disabled) | danger
   Модифікації: з іконками, розділювачі, підписи-групи, вирівнювання вправо
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Корінь ─────────────────────────────────────────────────────────────── */
.dropdown {
  position: relative;
  display: inline-flex;
}

/* ── Шеврон у тригері ───────────────────────────────────────────────────── */
.dropdown__chevron {
  width: var(--uris-component-icon-size-sm);
  height: var(--uris-component-icon-size-sm);
  flex-shrink: 0;
  transition: transform var(--uris-duration-fast) var(--uris-ease-default);
}

.dropdown.is-open .dropdown__chevron {
  transform: rotate(180deg);
}

/* ── Тригер у стилі Tabs (лише текстовий .btn-quiet-тригер) ──────────────────
   Замість сірої заливки btn-quiet — нижня індикатор-смуга (горизонтальний
   аналог підкреслення таба) + текст на щабель жирніший. Ghost-тригер «три
   крапки» (.btn-ghost) лишається зі своїм hover. Перевикористовуємо наявний
   .btn::after (inset:0, opacity:0, transition opacity) як смугу. */
.dropdown__trigger.btn-quiet::after {
  inset: auto 0 0 0;
  height: var(--uris-component-dropdown-indicator-width);
  border-radius: 0;
  background: var(--uris-color-semantic-primary);
}

/* hover/active: прибрати заливку (специфічність > btn-quiet), показати смугу, bold */
.dropdown__trigger.btn-quiet:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover,
.dropdown__trigger.btn-quiet:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  background-color: transparent;
  font-weight: var(--uris-font-weight-bold);
}
.dropdown__trigger.btn-quiet:not([aria-disabled="true"]):hover::after,
.dropdown.is-open .dropdown__trigger.btn-quiet::after {
  opacity: 1;
}

/* відкритий стан = активний таб: смуга лишається + bold */
.dropdown.is-open .dropdown__trigger.btn-quiet {
  font-weight: var(--uris-font-weight-bold);
}

/* ── Меню (popup-контейнер) ─────────────────────────────────────────────── */
.dropdown__menu {
  position: absolute;
  top: calc(100% + var(--uris-spacing-1));
  left: 0;
  z-index: var(--uris-component-dropdown-z-index);

  list-style: none;
  margin: 0;
  /* Лише вертикальний відступ: пункти йдуть на всю ширину, тож підсвітка
     повноширинна (edge-to-edge), а не інсет-пігулка. */
  padding-block: var(--uris-component-dropdown-menu-padding-block);
  padding-inline: 0;

  /* width:max-content lets the menu size itself to the longest item;
     min-width ensures it is never narrower than the token minimum. */
  width: max-content;
  min-width: var(--uris-component-dropdown-min-width);
  max-height: var(--uris-component-dropdown-max-height);
  /* overflow-x:hidden кліпає повноширинну смугу по заокруглених кутах картки;
     overflow-y:auto лишає прокрутку для довгих меню. */
  overflow: hidden auto;

  background-color: var(--uris-color-semantic-surface);
  /* Без жорсткої рамки: край тримає шарувата тінь (hairline-ring 4% +
     два дифузні шари near-black). */
  border-radius: var(--uris-radius-md);
  box-shadow: var(--uris-shadow-lg); /* аудит #8: єдина шкала тіней замість bespoke-токена */

  /* Прихований стан. visibility перемикається миттєво при відкритті
     (інакше синхронний focus() на пункт не спрацьовує — елемент ще hidden)
     і з затримкою duration-fast при закритті (щоб opacity встигла зникнути). */
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(-1 * var(--uris-spacing-1)));
  pointer-events: none;
  transition:
    opacity    var(--uris-duration-fast) var(--uris-ease-default),
    transform  var(--uris-duration-fast) var(--uris-ease-default),
    visibility 0s linear var(--uris-duration-fast);
}

/* Вирівнювання вправо (для тригерів біля правого краю) */
.dropdown__menu--end {
  left: auto;
  right: 0;
}

/* Відкритий стан */
.dropdown.is-open .dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* ── Поле пошуку в довгих меню ──────────────────────────────────────────────
   dropdown.js вставляє його першим елементом меню з > 6 пунктів (лінива
   інжекція на відкритті). Липке при скролі меню, з власним фоном, щоб
   пункти не просвічували; негативний офсет компенсує padding-block меню —
   поле прилягає до верхнього краю картки впритул. Стилі інпута власні
   (без залежності від input.css — не всі сторінки його підключають). */
.dropdown__menu-search {
  position: sticky;
  inset-block-start: calc(-1 * var(--uris-component-dropdown-menu-padding-block));
  z-index: 1;
  margin-block-start: calc(-1 * var(--uris-component-dropdown-menu-padding-block));
  padding: var(--uris-spacing-2);
  background: var(--uris-color-semantic-surface);
  border-block-end: 1px solid var(--uris-color-semantic-border);
}
.dropdown__menu-search input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--uris-spacing-2) var(--uris-spacing-3);
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-sm-size);
  line-height: var(--uris-text-sm-line);
  color: var(--uris-color-semantic-text);
  background: var(--uris-color-semantic-surface);
  border: 1px solid var(--uris-color-semantic-border);
  border-radius: var(--uris-radius-sm);
}
.dropdown__menu-search input:focus-visible {
  outline: 2px solid var(--uris-color-semantic-focus-ring);
  outline-offset: -1px;
}

/* ── Пункт меню ─────────────────────────────────────────────────────────── */
.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--uris-spacing-2);
  width: 100%;
  min-height: var(--uris-component-dropdown-item-height);
  padding-block: var(--uris-spacing-2);
  padding-inline: var(--uris-spacing-4);

  background: transparent;
  border: none;
  /* Прямокутна підсвітка на всю ширину меню (кути картки кліпає overflow). */
  border-radius: 0;
  cursor: pointer;
  text-align: left;

  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-base-size);
  font-weight: var(--uris-font-weight-regular);
  line-height: var(--uris-text-base-line);
  color: var(--uris-color-semantic-text);

  transition:
    box-shadow  var(--uris-duration-fast) var(--uris-ease-default),
    color       var(--uris-duration-fast) var(--uris-ease-default),
    font-weight var(--uris-duration-fast) var(--uris-ease-default);
}

/* Hover/focus у стилі Tabs: без заливки — ліва індикатор-смуга (вертикальний
   аналог підкреслення таба) + текст на щабель жирніший. */
.dropdown__item:not([aria-disabled="true"]):hover {
  box-shadow: inset var(--uris-component-dropdown-indicator-width) 0 0 0 var(--uris-color-semantic-primary);
  font-weight: var(--uris-font-weight-medium);
}

/* Focus: та сама смуга + видимий ring навколо пункта (overflow кліпає, тож inset) */
.dropdown__item:focus-visible {
  outline: none;
  font-weight: var(--uris-font-weight-medium);
  box-shadow:
    inset var(--uris-component-dropdown-indicator-width) 0 0 0 var(--uris-color-semantic-primary),
    inset 0 0 0 2px var(--uris-color-semantic-focus-ring);
}

/* Disabled — aria-disabled зберігає фокусовність для скрін-рідерів */
.dropdown__item[aria-disabled="true"] {
  color: var(--uris-color-semantic-text-muted);
  cursor: default;
}

/* Danger-пункт */
.dropdown__item--danger {
  color: var(--uris-color-semantic-danger);
}

/* Danger hover/focus: смуга у небезпечному кольорі */
.dropdown__item--danger:not([aria-disabled="true"]):hover {
  box-shadow: inset var(--uris-component-dropdown-indicator-width) 0 0 0 var(--uris-color-semantic-danger);
}

.dropdown__item--danger:focus-visible {
  box-shadow:
    inset var(--uris-component-dropdown-indicator-width) 0 0 0 var(--uris-color-semantic-danger),
    inset 0 0 0 2px var(--uris-color-semantic-danger);
}

/* ── Іконка пункта ──────────────────────────────────────────────────────── */
.dropdown__item-icon {
  width: var(--uris-component-icon-size-md);
  height: var(--uris-component-icon-size-md);
  flex-shrink: 0;
  color: currentColor;
}

/* ── Розділювач ─────────────────────────────────────────────────────────── */
li.dropdown__sep {
  height: 1px;
  background-color: var(--uris-color-semantic-border);
  margin-block: var(--uris-spacing-1);
  /* На всю ширину — у тон повноширинній підсвітці пунктів. */
  margin-inline: 0;
  padding: 0;
  list-style: none;
}

/* ── Підпис групи ───────────────────────────────────────────────────────── */
.dropdown__group-label {
  display: block;
  padding-block: var(--uris-spacing-1) var(--uris-spacing-1);
  padding-inline: var(--uris-spacing-4);
  font-family: var(--uris-font-family-body);
  font-size: var(--uris-text-xs-size);
  font-weight: var(--uris-font-weight-medium);
  line-height: var(--uris-text-xs-line);
  color: var(--uris-color-semantic-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--uris-font-letter-spacing-caps);
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .dropdown__menu,
  .dropdown__chevron {
    transition: none;
  }
}