:host { box-sizing: border-box; }
:host *, :host ::before, :host ::after { box-sizing: inherit; }
[hidden] { display: none !important; }
:host { --tag-max-size: 10ch; --show-duration: 100ms; --hide-duration: 100ms; }
:host wa-tag::part(content) { display: initial; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: var(--tag-max-size); }
:host .disabled [part~="combobox"] { opacity: 0.5; cursor: not-allowed; outline: none; }
:host .enabled:is(.open, :focus-within) [part~="combobox"] { outline-color: var(--wa-color-focus); }
.select {
  flex: 1 1 auto; display: inline-flex; width: 100%; position: relative; vertical-align: middle; --show-duration: inherit; --hide-duration: inherit;
  &::part(popup) { z-index: 900; }
  &[data-current-placement^="top"]::part(popup) { transform-origin: center bottom; }
  &[data-current-placement^="bottom"]::part(popup) { transform-origin: center top; }
}
.combobox {
  flex: 1 1 0%; display: flex; width: 100%; min-width: 0px; align-items: center; justify-content: start; min-height: var(--wa-form-control-height); background-color: var(--wa-form-control-background-color); 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(--wa-form-control-border-width); color: var(--wa-form-control-value-color); cursor: pointer; font-family: inherit; font-weight: var(--wa-form-control-value-font-weight); line-height: var(--wa-form-control-value-line-height); overflow: hidden; padding: 0 var(--wa-form-control-padding-inline); position: relative; vertical-align: middle; transition-property: ; transition-duration: ; transition-delay: ; transition-behavior: ; transition-timing-function: var(--wa-transition-easing); outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) transparent; outline-offset: var(--wa-focus-ring-offset);
  :host([pill]) & { border-radius: var(--wa-border-radius-pill); }
}
:host([appearance="outlined"]) .combobox { background-color: var(--wa-form-control-background-color); border-color: var(--wa-form-control-border-color); }
:host([appearance="filled"]) .combobox { background-color: var(--wa-color-neutral-fill-quiet); border-color: var(--wa-color-neutral-fill-quiet); }
:host([appearance="filled-outlined"]) .combobox { background-color: var(--wa-color-neutral-fill-quiet); border-color: var(--wa-form-control-border-color); }
.display-input {
  position: relative; width: 100%; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; line-height: var(--wa-form-control-value-line-height); color: var(--wa-form-control-value-color); cursor: inherit; overflow: hidden; padding: 0px; margin: 0px; appearance: none;
  &:focus { outline: none; }
  &::placeholder { color: var(--wa-form-control-placeholder-color); }
}
:host([multiple]) {
  --_padding-with-tags: calc(var(--wa-form-control-height) * 0.1 - var(--wa-form-control-border-width));
  & .combobox:has(.tags wa-tag) { padding-block: var(--_padding-with-tags); padding-inline-start: var(--_padding-with-tags); }
}
:host([multiple]) .combobox:has(.tags wa-tag) .display-input { position: absolute; z-index: -1; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; }
.value-input { position: absolute; z-index: -1; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; padding: 0px; margin: 0px; }
.tags {
  display: flex; flex: 1 1 0%; align-items: center; flex-wrap: wrap; gap: 0.25em;
  &::slotted(wa-tag) { cursor: pointer !important; }
  .disabled &, .disabled &::slotted(wa-tag) { cursor: not-allowed !important; }
}
.start, .end { flex: 0 1 0%; display: inline-flex; align-items: center; color: var(--wa-color-neutral-on-quiet); }
.end::slotted(*) { margin-inline-start: var(--wa-form-control-padding-inline); }
.start::slotted(*) { margin-inline-end: var(--wa-form-control-padding-inline); }
:host([multiple]) .combobox:has(.tags wa-tag) .start::slotted(*) { margin-inline-start: calc(var(--wa-form-control-padding-inline) - var(--_padding-with-tags)); }
[part~="clear-button"] {
  display: inline-flex; align-items: center; justify-content: center; font-size: inherit; color: var(--wa-color-neutral-on-quiet); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: none; padding: 0px; transition: color var(--wa-transition-normal); cursor: pointer; margin-inline-start: var(--wa-form-control-padding-inline);
  &:focus { outline: none; }
  @media (hover: hover) {
  &:hover { color: color-mix(in oklab, currentColor, var(--wa-color-mix-hover)); }
}
  &:active { color: color-mix(in oklab, currentColor, var(--wa-color-mix-active)); }
}
.expand-icon {
  flex: 0 0 auto; display: flex; align-items: center; color: var(--wa-color-neutral-on-quiet); transition: rotate var(--wa-transition-slow) ease; rotate: 0deg; margin-inline-start: var(--wa-form-control-padding-inline);
  .open & { rotate: -180deg; }
}
.listbox {
  display: block; position: relative; font: inherit; box-shadow: var(--wa-shadow-m); background: var(--wa-color-surface-raised); border-color: var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); border-style: var(--wa-border-style); border-width: var(--wa-border-width-s); padding-block: 0.5em; padding-inline: 0px; overflow: auto; overscroll-behavior: none; max-width: var(--auto-size-available-width); max-height: var(--auto-size-available-height);
  &::slotted(wa-divider) { --spacing: 0.5em; }
}
slot:not([name])::slotted(small) { display: block; font-size: var(--wa-font-size-smaller); font-weight: var(--wa-font-weight-semibold); color: var(--wa-color-text-quiet); padding-block: 0.5em; padding-inline: 2.25em; }
:host { display: flex; flex-direction: column; }
[part~="form-control"] { display: contents; }
:is([part~="form-control-label"], [part~="label"]):has(:not(:empty)), :is([part~="form-control-label"], [part~="label"]).has-label { display: inline-flex; color: var(--wa-form-control-label-color); font-weight: var(--wa-form-control-label-font-weight); line-height: var(--wa-form-control-label-line-height); margin-block-end: 0.5em; }
:host([required]) :is([part~="form-control-label"], [part~="label"])::after { content: var(--wa-form-control-required-content); margin-inline-start: var(--wa-form-control-required-content-offset); color: var(--wa-form-control-required-content-color); }
[part~="hint"] {
  display: block; color: var(--wa-form-control-hint-color); font-weight: var(--wa-form-control-hint-font-weight); line-height: var(--wa-form-control-hint-line-height); margin-block-start: 0.5em; font-size: var(--wa-font-size-smaller);
  &:not(.has-slotted, .has-hint) { display: none; }
}
:host([size="xs"]) { font-size: var(--wa-font-size-xs); }
:host([size="s"]), :host([size="small"]) { font-size: var(--wa-font-size-s); }
:host([size="m"]), :host([size="medium"]) { font-size: var(--wa-font-size-m); }
:host([size="l"]), :host([size="large"]) { font-size: var(--wa-font-size-l); }
:host([size="xl"]) { font-size: var(--wa-font-size-xl); }