/* Combobox and MultiSelect component styles.
   Uses Omnis semantic tokens only — no hard-coded colors. */

/* ── Combobox ─────────────────────────────────────────────── */

/* Focus ring on the text input */
.omnis-combobox__input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
  border-color: var(--border-strong);
  border-radius: var(--radius-md);
}

/* Remove default focus outline (we supply our own) */
.omnis-combobox__input:focus {
  outline: none;
}

/* Toggle button hover */
.omnis-combobox__toggle:hover:not(:disabled) {
  color: var(--text);
}

/* Toggle button focus visible */
.omnis-combobox__toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Option hover (when not highlighted via keyboard) */
.omnis-combobox__option:not(.omnis-combobox__option--highlighted):not(.omnis-combobox__option--disabled):hover {
  background: var(--accent-bg);
  cursor: pointer;
}

/* Forced colors (high-contrast) — highlighted option */
@media (forced-colors: active) {
  .omnis-combobox__option--highlighted {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .omnis-combobox__option--selected {
    forced-color-adjust: none;
    color: Highlight;
  }
}

/* ── MultiSelect ─────────────────────────────────────────── */

/* Focus ring: shown on the field wrapper when the inner input is focused */
.omnis-multiselect__field:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
  border-color: var(--border-strong);
}

/* Suppress the native outline on the inner input (field wrapper carries it) */
.omnis-multiselect__input:focus {
  outline: none;
}

/* Chip remove button hover */
.omnis-multiselect__chip-remove:hover {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-full);
}

/* Chip remove button focus visible */
.omnis-multiselect__chip-remove:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-radius: var(--radius-full);
}

/* Toolbar clear-all button hover */
.omnis-multiselect__clear-all:hover:not(:disabled) {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* Toolbar clear-all focus visible */
.omnis-multiselect__clear-all:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

/* Option hover */
.omnis-multiselect__option:not(.omnis-multiselect__option--highlighted):not(.omnis-multiselect__option--disabled):hover {
  background: var(--accent-bg);
  cursor: pointer;
}

/* Forced colors (high-contrast) — highlighted option */
@media (forced-colors: active) {
  .omnis-multiselect__option--highlighted {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .omnis-multiselect__option--selected .omnis-multiselect__option-check {
    forced-color-adjust: none;
    border: 2px solid Highlight;
  }

  .omnis-multiselect__chip {
    forced-color-adjust: none;
    border: 1px solid Highlight;
  }
}