/* ============================================================
   SelectMenu – oo-sm
   Trigger-Element (Pill-Button mit Text, Chevron, optionalem X).
   Alle Farben und Abstände via --oo-* Tokens aus theme.css.
   ============================================================ */

.oo-sm__trigger-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--oo-space-2);
    padding: 0 var(--oo-space-2) 0 var(--oo-space-3);
    height: 2rem;
    border: var(--oo-border-width) solid var(--oo-color-border-strong);
    border-radius: var(--oo-radius-md);
    background: var(--oo-color-background);
    color: var(--oo-color-text);
    font-size: var(--oo-font-size-sm);
    font-family: var(--oo-font-family);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: border-color var(--oo-transition-fast), background var(--oo-transition-fast);
    box-sizing: border-box;
    max-width: 22rem;
}

.oo-sm__trigger-wrap:hover {
    border-color: var(--oo-primary);
    background: var(--oo-color-surface);
}

/* ── Größen ──────────────────────────────────────────────── */

.oo-sm__trigger-wrap--size-oo-size-xs  { height: 1.5rem;  font-size: var(--oo-font-size-xs); padding: 0 var(--oo-space-1) 0 var(--oo-space-2); gap: var(--oo-space-1); }
.oo-sm__trigger-wrap--size-oo-size-sm  { height: 1.75rem; font-size: var(--oo-font-size-xs); padding: 0 var(--oo-space-1) 0 var(--oo-space-2); }
.oo-sm__trigger-wrap--size-oo-size-lg  { height: 2.5rem;  font-size: var(--oo-font-size-md); padding: 0 var(--oo-space-3) 0 var(--oo-space-4); }
.oo-sm__trigger-wrap--size-oo-size-xl  { height: 3rem;    font-size: var(--oo-font-size-lg); padding: 0 var(--oo-space-4) 0 var(--oo-space-5); gap: var(--oo-space-3); }

/* ── Farbvarianten via OoButtonStyle (--_btn-* Custom Props) ── */

.oo-sm__trigger-wrap[style*="--_btn-bg"] {
    background: var(--_btn-bg);
    border-color: var(--_btn-border, var(--_btn-bg));
    color: var(--_btn-text);
}

.oo-sm__trigger-wrap[style*="--_btn-bg"]:hover {
    background: var(--_btn-hover);
    border-color: var(--_btn-hover);
}

.oo-sm__trigger-wrap[style*="--_btn-bg"] .oo-sm__trigger-arrow,
.oo-sm__trigger-wrap[style*="--_btn-bg"] .oo-sm__trigger-text--placeholder {
    color: var(--_btn-text);
    opacity: 0.75;
}

/* ── Text ────────────────────────────────────────────────── */

.oo-sm__trigger-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    padding: 2px 0;
}

.oo-sm__trigger-text--placeholder {
    color: var(--oo-color-text-subtle);
}

/* ── Chevron-Icon ─────────────────────────────────────────── */

.oo-sm__trigger-arrow {
    font-size: 1.1rem;
    color: var(--oo-color-text-subtle);
    flex-shrink: 0;
    line-height: 1;
}

/* ── Clear-Button ────────────────────────────────────────── */

.oo-sm__clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: var(--oo-space-1);
    padding-left: var(--oo-space-1);
    border-left: var(--oo-border-width) solid currentColor;
    opacity: 0.45;
    cursor: pointer;
    color: inherit;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity var(--oo-transition-fast);
}

.oo-sm__clear-btn:hover {
    opacity: 1;
}

.oo-sm__clear-icon {
    font-size: 1rem;
}