/* ============================================================
   Onesown Blazor Components – AutoComplete
   Abhängigkeit: select.css (oo--fake-input, oo-dropdown--*, oo-svg-icon, oo-validation-tooltip)
   ============================================================ */

/* ── Container ───────────────────────────────────────────── */

.oo-autocomplete {
    cursor: text;
    position: relative;
    width: 100%;
}

.oo-autocomplete--disabled {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

/* ── Input-Wrapper (Input + Clear + Pfeil) ───────────────── */

.oo-autocomplete--input-wrapper {
    align-items: center;
    display: flex;
    flex: 1;
    gap: var(--oo-space-1);
    min-width: 0;
}

.oo-autocomplete--input {
    background: none;
    border: none;
    color: var(--oo-color-text);
    flex: 1;
    font-family: inherit;
    font-size: inherit;
    min-width: 0;
    outline: none;
    padding: 0;
    width: 100%;
}

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

.oo-autocomplete--input:disabled,
.oo-autocomplete--input[readonly] {
    cursor: not-allowed;
}

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

.oo-autocomplete--clear {
    align-items: center;
    color: var(--oo-color-text-subtle);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
}

.oo-autocomplete--clear:hover {
    color: var(--oo-color-text);
}

/* ── Pfeil-Indikator ─────────────────────────────────────── */

.oo-autocomplete--arrow {
    align-items: center;
    color: var(--oo-color-text-subtle);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    transition: transform var(--oo-transition-fast);
}

.oo-autocomplete--arrow:hover {
    color: var(--oo-color-text);
}

.oo-autocomplete--arrow > .oo-svg-icon {
    height: 1.25rem;
    width: 1.25rem;
}

.oo-autocomplete--arrow.oo-autocomplete--arrow-open {
    transform: rotateX(180deg);
}

/* ── Dropdown-Liste ──────────────────────────────────────── */

.oo-autocomplete--list {
    background-color: var(--oo-color-surface);
    border: none;
    box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
    left: 0;
    overflow: hidden;
    position: absolute;
    right: 0;
    visibility: hidden;
    z-index: var(--oo-z-dropdown);
}

.oo-autocomplete--list-item {
    padding: 0.3125rem 0.625rem;
}

.oo-autocomplete--list-norecords {
    color: var(--oo-color-text-subtle);
    font-size: var(--oo-font-size-sm);
    padding: 0.5rem 0.625rem;
}

/* ── Size-Varianten ──────────────────────────────────────── */

.oo-autocomplete.oo-size-xs .oo--fake-input { font-size: var(--oo-font-size-xs); }
.oo-autocomplete.oo-size-sm .oo--fake-input { font-size: var(--oo-font-size-sm); }
.oo-autocomplete.oo-size-md .oo--fake-input { font-size: var(--oo-font-size-md); }
.oo-autocomplete.oo-size-lg .oo--fake-input { font-size: var(--oo-font-size-lg); }
.oo-autocomplete.oo-size-xl .oo--fake-input { font-size: var(--oo-font-size-xl); }