select,
label:has(select),
:host {
  /* Defaults for root element. */
  --outlined-background-color: var(--wa-form-control-background-color);
  --outlined-border-color: var(--wa-form-control-border-color);
  --outlined-text-color: var(--wa-form-control-value-color);

  /* Safari and FF don't like :where(:host) so we need to add :host explicitly.
    However, we can't just specify :host, because then it would become & :host which matches nothing.
    :host(*) is the same as :host and the & prevents it from becoming a descendant selector.
   */
  :where(&),
  :host(:where(&, *)) {
    /* Defaults with 0 specificity.
       * Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
       * Instead we provide the fallback when setting
       */
    --border-width: var(--wa-form-control-border-width);
    --box-shadow: initial;
  }
}

select,
:host [part~='combobox'] {
  background-color: var(--background-color, var(--wa-form-control-background-color));
  border-color: var(--border-color, var(--wa-form-control-border-color));
  border-radius: var(--wa-form-control-border-radius);
  border-style: var(--wa-form-control-border-style);
  border-width: var(--border-width);
  box-shadow: var(--box-shadow);
  color: var(--wa-form-control-value-color);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--wa-size);
  font-weight: var(--wa-form-control-value-font-weight);
  line-height: var(--wa-form-control-value-line-height);
  min-width: 0;
  overflow: hidden;
  padding: var(--wa-space-smaller) var(--wa-space);
  position: relative;
  vertical-align: middle;
  width: 100%;
  transition:
    background-color var(--wa-transition-normal),
    border var(--wa-transition-normal),
    outline var(--wa-transition-fast);
  transition-timing-function: var(--wa-transition-easing);
}

/* Add ellipses to multi select options */
:host wa-tag::part(content) {
  display: initial;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 7ch;
}

select:disabled,
:host .disabled [part~='combobox'] {
  opacity: 0.5;
  cursor: not-allowed;
  outline: none;
}

select:focus,
:host .enabled:is(.open, :focus-within) [part~='combobox'] {
  outline: var(--wa-focus-ring);
  outline-offset: var(--wa-focus-ring-offset);
}

/* Replace native select caret */
select {
  appearance: none;

  --icon-caret: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><path fill="rgb(180 180 200)" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>');

  background-image: var(--icon-caret), var(--icon-caret);
  background-repeat: no-repeat;
  background-position: center right var(--wa-space);
  background-blend-mode: hue, difference;
}
