/**
 * =============================================================================
 * БАЗОВЫЕ СТИЛИ КОМПОНЕНТА CUSTOM-SELECT
 * =============================================================================
 * Структурные стили и позиционирование выпадающего списка.
 * Цвета и темы определены в themes.css.
 * Глобальные переменные (радиусы, анимации) из themes/base.css.
 *
 * ОСОБЕННОСТИ:
 * - CSS Anchor Positioning для современных браузеров
 * - JS fallback для позиционирования в старых браузерах
 * - Поддержка @position-try для автоматического выбора позиции
 */
:root {
  --cs-min-width: inherit;
}
custom-select {
  /* =========================================================================
   * SVG ИКОНКИ (data-uri для минимизации запросов)
   * =========================================================================
   */
  --cs-svg-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m18.3 15.3.4-.4.4-1 0-1.4-4.9-4.9a2 2 0 0 0-2.8 0l-4.9 4.9a1 1 0 1 0 1.4 1.4l4.2-4.2a1 1 0 0 1 1.4 0l4.2 4.2c.4.4 1 .4 1.4 0z"/></svg>');
  --cs-svg-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M8.3 17a1.4 1.4 0 0 1-1.1-.5L3.6 11.7a1.4 1.4 0 0 1 2.2-1.7l2.4 3.1L14.1 3.6a1.4 1.4 0 0 1 2.4 1.5l-7 11.2a1.4 1.4 0 0 1-1.2.7z"/></svg>');
  --cs-trigger-pad-y: 0.3125rem;
  --cs-trigger-line: 1.5em;
  --cs-trigger-height: calc(var(--cs-trigger-pad-y) * 2 + var(--cs-trigger-line) + 2px);

  display: inline-block;
  min-width: 3.75rem;
  max-width: 50vw;
  margin: 0.625rem 0;
  color: var(--cs-text);
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;

  &.loading {
    cursor: progress;
  }

  /*
   * Authoring markup (<option>, <optgroup>) lives in light DOM until the
   * element upgrades and finishes its first render. Hide options and reserve
   * trigger height through both phases so there is no flash or layout shift.
   */
  &:not(:defined),
  &:not([data-cs-ready]) {
    display: block;
    vertical-align: top;
    min-height: var(--cs-trigger-height);
    height: var(--cs-trigger-height);
    overflow: hidden;
    box-sizing: border-box;
    border-radius: var(--cs-border-radius, 10px);
    border: 1px solid var(--cs-border);
    background: var(--cs-bg);

    & > option,
    & > optgroup {
      display: none !important;
    }
  }

  &[data-cs-ready] {
    height: var(--cs-trigger-height);
    min-height: var(--cs-trigger-height);
    overflow: visible;
    border: none;
    background: transparent;
    border-radius: 0;
  }

  /* Authoring options stay in light DOM so they can change after upgrade. */
  & > option,
  & > optgroup {
    display: none !important;
  }

  /* Клавиатурный фокус (Tab): кольцо на триггере, не при клике мышью */
  &:focus-visible:not(.cs-disabled):not([disabled]) > label {
    outline: 2px solid var(--cs-focus-ring);
    outline-offset: 2px;
  }

  select {
    display: none;
  }

  &[data-mobile] > label {
    position: relative;
    select {
      display: block;
      opacity: 0;
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      /* Make select visible on mobile for native behavior */
      background: transparent;
      border: none;
      outline: none;
      -webkit-appearance: none;
      appearance: none;
    }
  }

  &.cs-disabled,
  &[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    & > label {
      cursor: not-allowed;
      background: var(--cs-bg, #f5f5f5);
      border-color: var(--cs-border, #ddd);
      color: var(--cs-text, #999);
      &:after {
        opacity: 0.3;
      }
    }
  }

  & > label {
    /* Масштаб стрелки для press-эффекта (вдавливание при нажатии) */
    --cs-arrow-scale: 1;
    min-width: var(--cs-min-width);
    height: var(--cs-trigger-height);
    min-height: var(--cs-trigger-height);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    line-height: 1.5;
    cursor: pointer;
    background: var(--cs-bg);
    border-radius: var(--cs-border-radius, 10px);
    border: 1px solid var(--cs-border);
    padding: var(--cs-trigger-pad-y) 1.875rem var(--cs-trigger-pad-y) 0.625rem;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &:after {
      content: "";
      pointer-events: none;
      position: absolute;
      top: 50%;
      right: 0.125rem;
      height: 100%;
      max-height: 1.5625rem;
      aspect-ratio: 1;
      background-color: currentColor;
      -webkit-mask: var(--cs-svg-arrow) no-repeat 50% 45% / 80%;
      mask: var(--cs-svg-arrow) no-repeat 50% 45% / 80%;
      opacity: 0.3;
      /* Закрыто: scaleY(-1) вниз, открыто: scaleY(1) вверх — отражение по вертикали, плавно интерполируется */
      transform: translateY(-50%) scaleY(-1) scale(var(--cs-arrow-scale));
      transform-origin: center center;
      transition: transform var(--cs-animation-duration) var(--cs-animation-timing);
    }

    /* Эффект нажатия на стрелку: вдавливание */
    &:active {
      --cs-arrow-scale: 0.8;
    }

    p {
      margin: 0;
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      max-width: 100%;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    b {
      font-weight: normal;
    }
  }

  &[data-popup="open"] > label:after {
    transform: translateY(-45%) scaleY(1) scale(var(--cs-arrow-scale));
  }

  /* =========================================================================
   * СЛИЯНИЕ ТРИГГЕРА И POPUP В ОДИН БЛОК
   * =========================================================================
   * При раскрытии общая грань между label и popup становится прямой,
   * чтобы визуально это был единый блок (см. data-cs-position).
   */
  &[data-popup="open"][data-cs-position="bottom"] > label {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  &[data-popup="open"][data-cs-position="top"] > label {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  & > dialog {
    user-select: none;
    opacity: 0;
    transform: translateY(-0.625rem) scaleY(0);
    transform-origin: top;
    transition:
      opacity var(--cs-animation-duration) var(--cs-animation-timing),
      transform var(--cs-animation-duration) var(--cs-animation-timing);
    /*
     * ВАЖНО: position: fixed требуется для корректной работы с showModal()
     * и CSS Anchor Positioning. showModal() по умолчанию использует fixed,
     * и anchor positioning также требует fixed для привязки к viewport.
     */
    position: fixed;
    isolation: isolate;
    color: var(--cs-text);
    background: var(--cs-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--cs-border-radius, 10px);
    border: 1px solid var(--cs-border);
    box-shadow: var(--cs-popup-shadow, 0 14px 40px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.1));
    min-height: 1.875rem;
    height: fit-content;
    max-height: 50vh;
    max-width: min(37.5rem, 50vw);
    width: fit-content;
    min-width: var(--cs-min-width);
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;

    &[noscroll] {
      overflow: hidden;
    }
    box-sizing: border-box;
    padding: 0;
    /* Убираем дефолтный margin, чтобы управлять отступами через @position-try */
    margin: 0;

    /* Раскрытие вниз: растём из верхней грани (стык с триггером) */
    &[data-cs-position="bottom"] {
      transform-origin: top;
      border-top-left-radius: 0;
      border-top-right-radius: 0;

      .cs-filter-container {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }

    /* Раскрытие вверх: растём из нижней грани (стык с триггером) */
    &[data-cs-position="top"] {
      transform-origin: bottom;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    /* Закрытое визуальное состояние при [open] (для анимации входа/выхода) */
    &[open][data-hide="true"] {
      opacity: 0;
      transform: translateY(-0.5rem) scaleY(0.92);
    }
    &[open][data-cs-position="top"][data-hide="true"] {
      transform: translateY(0.5rem) scaleY(0.92);
    }

    /* Открыто: выскальзывание вниз/вверх от стыка с триггером */
    &[open]:not([data-hide="true"]) {
      opacity: 1;
      transform: translateY(0) scaleY(1);
    }

    @starting-style {
      &[open]:not([data-hide="true"]) {
        opacity: 0;
        transform: translateY(-0.5rem) scaleY(0.92);
      }
      &[open][data-cs-position="top"]:not([data-hide="true"]) {
        transform: translateY(0.5rem) scaleY(0.92);
      }
    }

    &::backdrop {
      opacity: 0;
    }

    .cs-filter-container {
      padding: 0.3125rem 0.5rem;
      border-bottom: 1px solid var(--cs-border);
      background: var(--cs-bg);
      position: sticky;
      top: 0;
      z-index: 10;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: var(--cs-border-radius, 10px) var(--cs-border-radius, 10px) 0 0;
    }

    .cs-filter-input {
      width: 100%;
      height: 2rem;
      padding: 0 0.5rem;
      border: none;
      border-radius: calc(var(--cs-border-radius, 10px) * 0.8);
      font-size: 0.875rem;
      outline: none;
      background: transparent;
      color: var(--cs-text);
      box-sizing: border-box;

      &:focus {
        outline: none;
      }

      &::placeholder {
        color: var(--cs-muted-text);
        opacity: 0.5;
      }
    }

    & > ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    h6,
    .cs-group-label {
      display: block;
      margin: 0;
      padding: 0.3125rem 0.625rem 0.125rem 0.625rem;
      opacity: 0.5;
      font: inherit;
      cursor: default;
    }

    li[role="group"] {
      padding: 0;
      cursor: default;
      overflow: visible;
      background: transparent;
    }

    li[role="group"]::before,
    li[role="group"]::after {
      content: none;
      display: none;
    }

    li {
      padding: 0.5rem 0.625rem 0.5rem 2.5rem;
      cursor: pointer;
      border-radius: 0 !important;
      position: relative;
      background: transparent;
      transition:
        color var(--cs-animation-duration) var(--cs-animation-timing),
        transform 0.1s linear;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      isolation: isolate;

      /* Подсветка шире строки — при scale фон не отходит от краёв */
      &::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: -20%;
        width: 140%;
        height: 100%;
        background: var(--cs-accent-bg);
        opacity: 0;
        pointer-events: none;
        transform-origin: center center;
        transition:
          opacity var(--cs-animation-duration) var(--cs-animation-timing),
          transform 0.1s linear;
      }

      /* Галочка выбранного пункта */
      &[selected]::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        height: 100%;
        aspect-ratio: 1;
        background-color: currentColor;
        -webkit-mask: var(--cs-svg-check) no-repeat center / 45%;
        mask: var(--cs-svg-check) no-repeat center / 45%;
      }

      /* Эффект нажатия: сжимаем строку */
      &:active:not([disabled]) {
        transform: scale(0.94);
      }

      &[disabled] {
        pointer-events: none;
        opacity: 0.3;
      }

      &:focus:not([disabled]),
      &:active:not([disabled]) {
        overflow: visible;
      }

      &:focus:not([disabled]) {
        outline: none;
        color: var(--cs-accent-text);

        &::before {
          opacity: 1;
        }
      }
    }
  }

  /* =========================================================================
   * ПОЗИЦИОНИРОВАНИЕ POPUP
   * =========================================================================
   * Позиционирование выполняется через JS в desktop-popup.js:positionPopup()
   * CSS Anchor Positioning (Chrome 125+) имеет проблемы с showModal(),
   * поэтому используем надежный JS-подход.
   */
}

@keyframes cs-search-spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

.cs-filter-container,
.cs-mobile-filter-container {
  position: relative;
}

.cs-search-spinner {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  border: 2px solid color-mix(in srgb, var(--cs-muted-text, #999) 35%, transparent);
  border-top-color: var(--cs-accent, var(--cs-text, currentColor));
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  box-sizing: border-box;
}

.cs-filter-container.cs-is-loading .cs-search-spinner,
.cs-mobile-filter-container.cs-is-loading .cs-search-spinner {
  opacity: 1;
  animation: cs-search-spin 0.65s linear infinite;
}

.cs-filter-container.cs-is-loading .cs-filter-input {
  padding-right: 1.75rem;
}

.cs-mobile-filter-container.cs-is-loading .cs-mobile-filter-input {
  padding-right: 2rem;
}

@media (prefers-reduced-motion: reduce) {
  custom-select,
  custom-select * {
    transition: none !important;
  }

  custom-select > label::after {
    transition: transform 0.2s ease !important;
  }

  .cs-search-spinner {
    animation: none !important;
    opacity: 1;
    border-top-color: var(--cs-accent, var(--cs-text, currentColor));
  }
}