:host {
  --wcs-select-ligther-percentage: 40;
  --wcs-select-control-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-select-text-color-disabled: var(--wcs-semantic-color-text-disabled);
  --wcs-select-value-color: var(--wcs-semantic-color-text-primary);
  --wcs-select-value-font-weight: var(--wcs-semantic-font-weight-medium);
  --wcs-select-placeholder-color: var(--wcs-semantic-color-text-tertiary);
  --wcs-select-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);
  --wcs-select-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);
  --wcs-select-options-padding: var(--wcs-semantic-spacing-base-150);
  --wcs-select-control-line-height: var(--wcs-semantic-font-line-height-large);
  --wcs-select-control-background-color: var(--wcs-semantic-color-background-control-default);
  --wcs-select-control-arrow-color: var(--wcs-semantic-color-foreground-action-secondary-default);
  --wcs-select-control-arrow-color-disabled: var(--wcs-semantic-color-foreground-disabled);
  --wcs-select-control-chips-gap: var(--wcs-semantic-spacing-small);
  --wcs-select-control-border-color-default: var(--wcs-semantic-color-border-primary);
  --wcs-select-control-border-color-disabled: var(--wcs-semantic-color-border-disabled);
  --wcs-select-control-border-color-focus: var(--wcs-semantic-color-border-control-focus);
  --wcs-select-control-border-color-error: var(--wcs-semantic-color-border-critical);
  --wcs-select-control-border-style-default: solid;
  --wcs-select-control-border-style-error: solid;
  --wcs-select-control-border-style-focus: var(--wcs-semantic-border-style-focus-control);
  --wcs-select-control-border-width-default: var(--wcs-semantic-border-width-default);
  --wcs-select-control-border-width-focus: var(--wcs-semantic-border-width-large);
  --wcs-select-control-padding-horizontal-m: var(--wcs-semantic-spacing-large);
  --wcs-select-control-padding-horizontal-l: var(--wcs-semantic-spacing-large);
  --wcs-select-control-height: var(--wcs-select-control-height-m);
  --wcs-select-control-height-m: var(--wcs-semantic-size-m);
  --wcs-select-control-height-l: var(--wcs-semantic-size-l);
  --wcs-internal-select-chip-size: var(--wcs-semantic-size-s);
  --wcs-select-control-font-size: var(--wcs-select-control-font-size-m, 1rem);
  --wcs-select-control-font-size-m: var(--wcs-semantic-font-size-m);
  --wcs-select-control-font-size-l: var(--wcs-semantic-font-size-l);
  --wcs-select-overlay-max-height: 360px;
  --wcs-select-overlay-background-color: var(--wcs-semantic-color-background-surface-primary);
  --wcs-select-overlay-border-width: var(--wcs-semantic-border-width-default);
  --wcs-select-overlay-border-color: var(--wcs-semantic-color-border-secondary);
  --wcs-select-overlay-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-select-control-chip-color-default: var(--wcs-semantic-color-foreground-action-primary-default);
  --wcs-select-control-chip-color-disabled: var(--wcs-semantic-color-text-disabled);
  --wcs-select-control-chip-background-color-default: var(--wcs-semantic-color-background-action-primary-default);
  --wcs-select-control-chip-background-color-disabled: var(--wcs-semantic-color-background-action-primary-disabled);
  --wcs-select-control-chip-padding-vertical: var(--wcs-semantic-spacing-small);
  --wcs-select-control-chip-padding-horizontal: calc(1.5 * var(--wcs-semantic-spacing-base));
  --wcs-select-control-chip-line-height: var(--wcs-semantic-font-line-height-large);
  --wcs-select-control-chip-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-select-control-autocomplete-padding-vertical-m: var(--wcs-semantic-spacing-small);
  --wcs-select-control-autocomplete-padding-vertical-l: var(--wcs-semantic-spacing-small);
  --wcs-select-internal-noresult-padding-horizontal: var(--wcs-semantic-spacing-base);
  display: block;
  min-height: var(--wcs-select-control-height);
  position: relative;
  outline: none;
  user-select: none;
  box-sizing: border-box;
}
:host svg {
  flex-shrink: 0;
}
:host .wcs-select-control {
  min-height: var(--wcs-select-control-height);
  outline: var(--wcs-select-control-border-width-default) var(--wcs-select-control-border-style-default) var(--wcs-select-control-border-color-default);
  outline-offset: calc(var(--wcs-select-control-border-width-default) * -1);
}
:host .arrow {
  fill: var(--wcs-select-control-arrow-color);
}
:host .chip {
  fill: var(--wcs-select-control-chip-color-default);
  opacity: calc((100 - var(--wcs-select-ligther-percentage)) / 100);
}
:host .chip:hover {
  opacity: 100;
}

.wcs-select-control {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  background-color: var(--wcs-select-control-background-color);
  border-radius: var(--wcs-select-control-border-radius);
  outline: var(--wcs-select-control-border-color-default) solid var(--wcs-select-control-border-width-default);
  outline-offset: calc(var(--wcs-select-control-border-width-default) * -1);
  font-size: var(--wcs-select-control-font-size, 1rem);
  line-height: var(--wcs-select-control-line-height);
  cursor: pointer;
  padding-left: var(--wcs-select-control-padding-horizontal-m);
  padding-right: calc(var(--wcs-select-control-padding-horizontal-m) - 4px);
}

label {
  cursor: pointer;
  transition: color 125ms ease-in;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
label.wcs-select-placeholder {
  color: var(--wcs-select-placeholder-color);
  font-style: var(--wcs-select-placeholder-font-style);
  font-weight: var(--wcs-select-placeholder-font-weight);
}
label.wcs-select-value {
  color: var(--wcs-select-value-color);
  font-style: normal;
  font-weight: var(--wcs-select-value-font-weight);
}
label::after {
  content: "";
  padding: 1px;
}

.wcs-select-value-container {
  max-width: calc(100% - (24px + var(--wcs-semantic-spacing-base)));
  padding-right: 8px;
  display: flex;
  flex-direction: row;
  gap: var(--wcs-select-control-chips-gap);
  align-items: center;
  flex-wrap: wrap;
}

.wcs-select-chip {
  box-sizing: border-box;
  height: var(--wcs-internal-select-chip-size);
  line-height: var(--wcs-select-control-chip-line-height);
  color: var(--wcs-select-control-chip-color-default);
  background-color: var(--wcs-select-control-chip-background-color-default);
  border-radius: var(--wcs-select-control-chip-border-radius);
  display: flex;
  align-items: center;
  padding: var(--wcs-select-control-chip-padding-vertical) var(--wcs-select-control-chip-padding-horizontal);
  overflow: initial;
  z-index: 1;
}

.wcs-select-options {
  display: none;
  position: absolute;
  z-index: 999999999;
  border: solid var(--wcs-select-overlay-border-width) var(--wcs-select-overlay-border-color);
  border-radius: var(--wcs-select-overlay-border-radius);
  max-height: var(--wcs-select-overlay-max-height);
  overflow-y: auto;
  width: calc(100% - (2 * var(--wcs-select-overlay-border-width) + 2 * var(--wcs-select-options-padding)));
  padding: var(--wcs-select-options-padding);
  background-color: var(--wcs-select-overlay-background-color);
}

:host(.expanded) {
  outline-width: var(--wcs-select-control-border-width-focus);
}
:host(.expanded) .wcs-select-control {
  outline: var(--wcs-select-control-border-width-focus) var(--wcs-select-control-border-style-focus) var(--wcs-select-control-border-color-focus);
  outline-offset: calc(var(--wcs-select-control-border-width-focus) * -1);
}
:host(.expanded) .wcs-select-options {
  display: block;
}

:host([aria-invalid=true]) .wcs-select-control, :host([autocomplete]):has(input[aria-invalid=true]) .wcs-select-control {
  outline-style: var(--wcs-select-control-border-style-error);
  outline-color: var(--wcs-select-control-border-color-error);
}

:host(:not(.expanded):focus-visible) {
  outline-width: var(--wcs-select-control-border-width-focus);
}
:host(:not(.expanded):focus-visible) .wcs-select-control {
  outline: var(--wcs-select-control-border-width-focus) var(--wcs-select-control-border-style-focus) var(--wcs-select-control-border-color-focus);
  outline-offset: calc(var(--wcs-select-control-border-width-focus) * -1);
}

:host([disabled]) {
  cursor: not-allowed;
  --wcs-select-control-background-color: var(--wcs-semantic-color-background-control-disabled);
}
:host([disabled]) .wcs-select-control {
  outline-style: var(--wcs-select-control-border-style-default);
  outline-color: var(--wcs-select-control-border-color-disabled);
}
:host([disabled]) .wcs-select-control,
:host([disabled]) label {
  cursor: default;
  pointer-events: none;
}
:host([disabled]) label {
  color: var(--wcs-select-text-color-disabled);
}
:host([disabled]) .arrow {
  fill: var(--wcs-select-control-arrow-color-disabled);
}
:host([disabled]) .wcs-select-chip {
  color: var(--wcs-select-control-chip-color-disabled);
  background-color: var(--wcs-select-control-chip-background-color-disabled);
}
:host([disabled]) .chip {
  fill: var(--wcs-select-control-chip-color-disabled);
}

:host([size=m]) {
  --wcs-select-control-font-size: var(--wcs-select-control-font-size-m);
  --wcs-select-control-height: var(--wcs-select-control-height-m);
  --wcs-internal-select-chip-size: var(--wcs-select-chip-size-m);
}
:host([size=m]) .wcs-select-control {
  padding-left: var(--wcs-select-control-padding-horizontal-m);
  padding-right: calc(var(--wcs-select-control-padding-horizontal-m) - 4px);
}
:host([size=m]):host([autocomplete]) .autocomplete-field {
  height: calc(var(--wcs-select-control-height) - var(--wcs-select-control-autocomplete-padding-vertical-m) * 2);
}
:host([size=m]):host([autocomplete]) .wcs-select-value-container {
  padding-top: var(--wcs-select-control-autocomplete-padding-vertical-m);
  padding-bottom: var(--wcs-select-control-autocomplete-padding-vertical-m);
}

:host([size=l]) {
  --wcs-select-control-font-size: var(--wcs-select-control-font-size-l);
  --wcs-select-control-height: var(--wcs-select-control-height-l);
  --wcs-internal-select-chip-size: var(--wcs-select-chip-size-l);
}
:host([size=l]) .wcs-select-control {
  padding-left: var(--wcs-select-control-padding-horizontal-l);
  padding-right: calc(var(--wcs-select-control-padding-horizontal-l) - 4px);
}
:host([size=l]):host([autocomplete]) .autocomplete-field {
  height: calc(var(--wcs-select-control-height) - var(--wcs-select-control-autocomplete-padding-vertical-l) * 2);
}
:host([size=l]):host([autocomplete]) .wcs-select-value-container {
  padding-top: var(--wcs-select-control-autocomplete-padding-vertical-l);
  padding-bottom: var(--wcs-select-control-autocomplete-padding-vertical-l);
}

:host([chips]) .wcs-select-control {
  flex-wrap: wrap;
}
:host([chips]) .wcs-select-value-container {
  margin-top: 4px;
  margin-bottom: 4px;
}

:host([autocomplete]) .wcs-select-value-container {
  margin: 0;
  width: 100%;
}
:host([autocomplete]) input {
  font: unset;
  background-color: transparent;
  outline: none;
  border: none;
  padding: unset;
  color: var(--wcs-select-value-color);
  font-weight: var(--wcs-select-value-font-weight) !important;
  font-size: var(--wcs-select-control-font-size);
  line-height: inherit;
}
:host([autocomplete]) input::placeholder {
  color: var(--wcs-select-placeholder-color);
  opacity: 1;
  font-weight: var(--wcs-select-placeholder-font-weight);
  font-style: var(--wcs-select-placeholder-font-style);
}

:host([autocomplete]:focus-within) .wcs-select-control {
  outline: var(--wcs-select-control-border-width-focus) var(--wcs-select-control-border-style-focus) var(--wcs-select-control-border-color-focus);
  outline-offset: calc(var(--wcs-select-control-border-width-focus) * -1);
}

.autocomplete-field {
  width: 0;
  min-width: 50px;
  flex-grow: 1;
}

.noresult-container {
  padding-left: var(--wcs-select-internal-noresult-padding-horizontal);
  padding-right: var(--wcs-select-internal-noresult-padding-horizontal);
  display: flex;
  flex-direction: row;
  align-items: center;
  height: var(--wcs-select-control-height);
}