/**
 * =============================================================================
 * ТЕМЫ ОФОРМЛЕНИЯ КОМПОНЕНТА CUSTOM-SELECT
 * =============================================================================
 * Цветовые схемы привязаны к переменным Telegram Web App.
 * Глобальные переменные (радиусы, анимации) берутся из themes/base.css.
 *
 * ПОДДЕРЖИВАЕМЫЕ ТЕМЫ (атрибут theme / data-theme):
 * - light
 * - dark
 * - auto (следует prefers-color-scheme)
 */

custom-select,
.cs-mobile-dialog {
  --cs-animation-duration: var(--transition-duration-normal, 0.3s);
  --cs-animation-timing: var(--ease-default, cubic-bezier(0.4, 0, 0.2, 1));
  --cs-popup-shadow: 0 14px 40px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.1);
  --cs-focus-ring: color-mix(in srgb, var(--tg-theme-button-color, #2481cc), transparent 45%);

  --cs-bg: linear-gradient(to left, #f3f3f3, var(--fg-color, #fff) 55%);
  --cs-text: var(--tg-theme-text-color, #000);
  --cs-border: color-mix(in srgb, var(--cs-text), transparent 90%);
  --cs-hover-bg: var(--tg-theme-secondary-bg-color, #f5f5f5);
  --cs-sheet-bg: var(--fg-color, #fff);

  --cs-accent-bg: var(--tg-theme-button-color, #2481cc);
  --cs-accent-text: var(--tg-theme-button-text-color, #fff);
  --cs-accent-text-color: var(--tg-theme-accent-text-color, #2481cc);

  --cs-input-bg: var(--tg-theme-secondary-bg-color, #efeff3);
  --cs-muted-text: var(--tg-theme-hint-color, #999);

  --cs-accent-bg-alpha: color-mix(in srgb, var(--tg-theme-button-color, #2481cc), transparent 90%);
  --cs-mark-bg: color-mix(in srgb, var(--tg-theme-button-color, #2481cc), transparent 65%);
  --cs-accent: var(--tg-theme-button-color, #2481cc);

  color-scheme: light;
}

custom-select[data-theme="light"],
.cs-mobile-dialog[data-theme="light"] {
  --cs-bg: linear-gradient(to left, #f3f3f3, var(--fg-color, #fff) 55%);
  --cs-text: var(--tg-theme-text-color, #000);
  --cs-border: color-mix(in srgb, var(--cs-text), transparent 90%);
  --cs-hover-bg: var(--tg-theme-secondary-bg-color, #f5f5f5);
  --cs-sheet-bg: rgba(255, 255, 255, 0.98);
  --cs-popup-shadow: 0 14px 40px rgba(0, 0, 0, 0.16), 0 4px 14px rgba(0, 0, 0, 0.1);
  color-scheme: light;
}

custom-select[data-theme="dark"],
.cs-mobile-dialog[data-theme="dark"] {
  --cs-bg: rgba(30, 30, 30, 0.9);
  --cs-text: var(--tg-theme-text-color, #fff);
  --cs-border: rgba(255, 255, 255, 0.15);
  --cs-hover-bg: rgba(255, 255, 255, 0.08);
  --cs-sheet-bg: rgba(30, 30, 30, 0.95);
  --cs-input-bg: rgba(255, 255, 255, 0.08);
  --cs-muted-text: var(--tg-theme-hint-color, rgba(255, 255, 255, 0.55));
  --cs-popup-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.25);
  color-scheme: dark;
}

custom-select[data-theme="auto"],
.cs-mobile-dialog[data-theme="auto"] {
  color-scheme: light dark;
}

@media screen and (prefers-color-scheme: dark) {
  custom-select[data-theme="auto"],
  .cs-mobile-dialog[data-theme="auto"] {
    --cs-bg: rgba(30, 30, 30, 0.9);
    --cs-text: var(--tg-theme-text-color, #fff);
    --cs-border: rgba(255, 255, 255, 0.15);
    --cs-hover-bg: rgba(255, 255, 255, 0.08);
    --cs-sheet-bg: rgba(30, 30, 30, 0.95);
    --cs-input-bg: rgba(255, 255, 255, 0.08);
    --cs-muted-text: var(--tg-theme-hint-color, rgba(255, 255, 255, 0.55));
    --cs-popup-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0, 0, 0, 0.25);
  }
}

@media (prefers-contrast: high) {
  custom-select,
  .cs-mobile-dialog {
    --cs-border: var(--tg-theme-text-color, currentColor);
  }
}