/* Dotted Lime Scrollbar für customizable <select>-Picker (Figma 61666:35359).
 *
 * Wird als separate Drupal-Library (preprocess: false) geladen, NICHT via
 * main.css/Tailwind, weil Lightning CSS chained Pseudo-Elements
 * `::picker(select)::-webkit-scrollbar-thumb` als Spec-Verstoß (max. 1
 * Pseudo-Element pro Selektor) verwirft. Chrome 135+ akzeptiert die
 * Chain mit `appearance: base-select` jedoch.
 *
 * radial-gradient erzeugt EINEN Dot pro 6×8px-Tile, repeat-y stacked sie
 * vertikal über die volle Thumb-Höhe.
 */
/* === Select2-Dropdown (Webform Multi/Single via CDN) — gleiche Optik === */
.select2-results__options::-webkit-scrollbar {
  width: 4px;
  background: transparent;
}

/* 12px top/bottom spacer — Figma 61666:35359 scrollbar column py-[12px].
   start:decrement / end:increment = äußere Buttons (oben/unten).
   Buttons bleiben transparent, damit kein visueller Artefakt entsteht. */
.select2-results__options::-webkit-scrollbar-button:start:decrement {
  display: block;
  height: 12px;
  background: transparent;
}

.select2-results__options::-webkit-scrollbar-button:end:increment {
  display: block;
  height: 12px;
  background: transparent;
}

/* Innere Buttons (selten aktiv, aber zur Sicherheit verstecken) */
.select2-results__options::-webkit-scrollbar-button:start:increment,
.select2-results__options::-webkit-scrollbar-button:end:decrement {
  display: none;
  height: 0;
}

.select2-results__options::-webkit-scrollbar-track,
.select2-results__options::-webkit-scrollbar-track-piece {
  background: transparent;
  border: none;
}

.select2-results__options::-webkit-scrollbar-thumb {
  background-color: transparent;
  background-image: radial-gradient(circle, #bedc00 1.5px, transparent 2px);
  background-size: 4px 7px;
  background-repeat: repeat-y;
  background-position: center top;
  border: none;
  border-radius: 0;
}

.select2-results__options::-webkit-scrollbar-corner {
  background: transparent;
}

@supports (appearance: base-select) {
  select::picker(select)::-webkit-scrollbar {
    width: 4px;
    background: transparent;
  }

  /* 12px top/bottom spacer — Figma 61666:35359 scrollbar column py-[12px]. */
  select::picker(select)::-webkit-scrollbar-button:start:decrement {
    display: block;
    height: 12px;
    background: transparent;
  }

  select::picker(select)::-webkit-scrollbar-button:end:increment {
    display: block;
    height: 12px;
    background: transparent;
  }

  select::picker(select)::-webkit-scrollbar-button:start:increment,
  select::picker(select)::-webkit-scrollbar-button:end:decrement {
    display: none;
    height: 0;
  }

  select::picker(select)::-webkit-scrollbar-track {
    background: transparent;
    border: none;
  }

  select::picker(select)::-webkit-scrollbar-track-piece {
    background: transparent;
  }

  /* Dotted lime Thumb: radial-gradient erzeugt einen Dot pro 6×8px-Tile,
     repeat-y stacked sie vertikal. */
  select::picker(select)::-webkit-scrollbar-thumb {
    background-color: transparent;
    background-image: radial-gradient(circle, #bedc00 1.5px, transparent 2px);
    background-size: 4px 7px;
    background-repeat: repeat-y;
    background-position: center top;
    border: none;
    border-radius: 0;
  }

  select::picker(select)::-webkit-scrollbar-corner {
    background: transparent;
  }
}