/**
    Applies all the outline properties useful to show a dashed-focus ring around a component.
    TODO: replace `$border-radius: 0.1rem` with semantic border-radius but keep in mind some components that must stay at 2px border-radius: checkbox, radio, links, ...
 */
:host {
  display: flex;
  /*
  * DO NOT REMOVE:
  * The native button is absolutely positioned.
  * This `position: relative` makes `wcs-dropdown` its containing block.
  * Without it, the button can be laid out relative to another ancestor higher in the DOM,
  * so when the browser focuses the native button it may scroll the window unexpectedly.
  */
  position: relative;
  --wcs-dropdown-outline-color-focus: var(--wcs-semantic-color-border-focus-base);
  --wcs-dropdown-padding-empty: var(--wcs-semantic-spacing-large);
  --wcs-dropdown-plain-arrow-color: var(--wcs-semantic-color-foreground-action-primary-default);
  --wcs-dropdown-stroked-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);
  --wcs-dropdown-clear-arrow-color: var(--wcs-semantic-color-foreground-action-tertiary-default);
  --wcs-dropdown-arrow-color-disabled: var(--wcs-semantic-color-text-disabled);
  --wcs-dropdown-overlay-max-height: 360px;
  --wcs-dropdown-overlay-padding: var(--wcs-semantic-spacing-base);
  --wcs-dropdown-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);
  --wcs-dropdown-overlay-border-width: var(--wcs-semantic-border-width-default);
  --wcs-dropdown-overlay-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-dropdown-overlay-border-color: var(--wcs-semantic-color-border-secondary);
}
:host wcs-button {
  height: fit-content;
}
:host svg {
  margin-right: -0.25rem;
}

/* Visually hide the native button */
button {
  position: absolute;
  opacity: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  outline: 0;
  outline-offset: 0;
}

button:focus-visible + wcs-button {
  outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);
  outline-offset: var(--wcs-semantic-spacing-small);
  border-radius: var(--wcs-button-border-radius);
}

@supports not selector(button:focus-visible + wcs-button) {
  button:focus-within + wcs-button {
    outline: var(--wcs-semantic-border-width-large) dashed var(--wcs-dropdown-outline-color-focus);
    outline-offset: var(--wcs-semantic-spacing-small);
    border-radius: var(--wcs-button-border-radius);
  }
}
.wcs-button-content-wrapper {
  display: flex;
  align-items: center;
}

.popover {
  display: none;
  border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);
  border-radius: var(--wcs-dropdown-overlay-border-radius);
  background-color: var(--wcs-dropdown-overlay-background-color);
  z-index: 9999;
}

.show {
  display: block;
}

.container {
  min-width: calc(10 * var(--wcs-semantic-size-base));
  border-radius: inherit;
  overflow: hidden;
  padding: var(--wcs-dropdown-overlay-padding);
  background-color: var(--wcs-dropdown-overlay-background-color);
}

:host([mode=clear]) .arrow {
  fill: var(--wcs-dropdown-clear-arrow-color);
}

:host([mode=stroked]) .arrow {
  fill: var(--wcs-dropdown-stroked-arrow-color);
}

:host([mode=plain]) .arrow {
  fill: var(--wcs-dropdown-plain-arrow-color);
}

:host([disabled]) .arrow {
  fill: var(--wcs-dropdown-arrow-color-disabled);
}

#arrow,
#arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
  border: var(--wcs-dropdown-overlay-border-width) solid var(--wcs-dropdown-overlay-border-color);
}

#arrow {
  visibility: hidden;
  z-index: -1;
}

#arrow::before {
  visibility: visible;
  content: "";
  transform: rotate(45deg);
}

#is-empty {
  display: block;
  width: 20ch;
  padding: 0 var(--wcs-dropdown-padding-empty);
}

.popover[data-popper-placement^=top] > #arrow {
  bottom: -5px;
}

.popover[data-popper-placement^=bottom] > #arrow {
  top: -6px;
}

.popover[data-popper-placement^=left] > #arrow {
  right: -4px;
}

.popover[data-popper-placement^=right] > #arrow {
  left: -6px;
}