:host {
  --wcs-native-select-line-height: var(--wcs-semantic-font-line-height-large);
  --wcs-native-select-size-m: var(--wcs-semantic-size-m);
  --wcs-native-select-font-size-m: var(--wcs-semantic-font-size-m);
  --wcs-native-select-size-l: var(--wcs-semantic-size-l);
  --wcs-native-select-font-size-l: var(--wcs-semantic-font-size-l);
  --wcs-native-select-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-native-select-background-color: var(--wcs-semantic-color-background-control-default);
  --wcs-native-select-border-color-default: var(--wcs-semantic-color-border-primary);
  --wcs-native-select-border-color-disabled: var(--wcs-semantic-color-border-disabled);
  --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-control-focus);
  --wcs-native-select-border-color-error: var(--wcs-semantic-color-border-critical);
  --wcs-native-select-border-style-default: solid;
  --wcs-native-select-border-style-focus: var(--wcs-semantic-border-style-focus-control);
  --wcs-native-select-border-width: var(--wcs-semantic-border-width-default);
  --wcs-native-select-border-width-focus: var(--wcs-semantic-border-width-large);
  --wcs-native-select-value-color: var(--wcs-semantic-color-text-primary);
  --wcs-native-select-value-font-weight: var(--wcs-semantic-font-weight-medium);
  --wcs-native-select-value-font-style: normal;
  --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-m);
  --wcs-native-select-padding-horizontal-m: var(--wcs-semantic-spacing-large);
  --wcs-native-select-padding-horizontal-l: var(--wcs-semantic-spacing-large);
  --wcs-native-select-arrow-color: var(--wcs-semantic-color-foreground-brand);
  --wcs-native-select-arrow-color-disabled: var(--wcs-semantic-color-foreground-disabled);
  --wcs-native-select-text-color-disabled: var(--wcs-semantic-color-text-disabled);
  --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-tertiary);
  --wcs-native-select-placeholder-font-weight: var(--wcs-semantic-font-weight-roman);
  --wcs-native-select-placeholder-font-style: var(--wcs-semantic-font-style-control-placeholder);
  --wcs-native-select-option-color: var(--wcs-semantic-color-text-primary);
  --wcs-native-select-option-font-style: normal;
  --wcs-native-select-option-selected-color: var(--wcs-semantic-color-text-primary);
}

::slotted(select) {
  box-sizing: border-box;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-color: var(--wcs-native-select-background-color);
  color: var(--wcs-native-select-value-color);
  border-radius: var(--wcs-native-select-border-radius);
  border: none;
  outline: var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-default);
  outline-offset: calc(var(--wcs-native-select-border-width) * -1);
  user-select: none;
  cursor: pointer;
  line-height: var(--wcs-native-select-line-height);
  font-size: inherit;
  opacity: 1;
  max-width: 100%;
  flex-grow: 1;
  padding-right: calc(var(--wcs-native-select-internal-padding-horizontal) + 24px);
  padding-left: var(--wcs-native-select-internal-padding-horizontal);
}

::slotted(select:disabled) {
  cursor: not-allowed;
  color: var(--wcs-native-select-text-color-disabled);
  outline: var(--wcs-native-select-border-style-default) var(--wcs-native-select-border-width) var(--wcs-native-select-border-color-disabled);
  --wcs-native-select-background-color: var(--wcs-semantic-color-background-control-disabled);
  --wcs-native-select-value-color: var(--wcs-native-select-text-color-disabled);
}

::slotted(select[aria-invalid=true]) {
  outline-style: var(--wcs-native-select-border-style-default);
  outline-color: var(--wcs-native-select-border-color-error) !important;
  outline-offset: calc(var(--wcs-native-select-border-width) * -1);
}

:host([data-disabled]) .select-wrapper .arrow-container .arrow {
  fill: var(--wcs-native-select-arrow-color-disabled);
}

:host, :host([data-size=m]) {
  font-size: var(--wcs-native-select-font-size-m);
  --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-m);
}
:host ::slotted(select), :host([data-size=m]) ::slotted(select) {
  height: var(--wcs-native-select-size-m);
}

:host([data-size=l]) {
  font-size: var(--wcs-native-select-font-size-l);
  --wcs-native-select-internal-padding-horizontal: var(--wcs-native-select-padding-horizontal-l);
}
:host([data-size=l]) ::slotted(select) {
  height: var(--wcs-native-select-size-l);
}

::slotted(select:focus-visible) {
  outline: var(--wcs-native-select-border-style-focus) var(--wcs-native-select-border-width-focus) var(--wcs-native-select-border-color-focus);
  outline-offset: calc(var(--wcs-native-select-border-width-focus) * -1);
}

.select-wrapper {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
}

svg {
  flex-shrink: 0;
}

.arrow {
  fill: var(--wcs-native-select-arrow-color);
}

.arrow-container {
  pointer-events: none;
  display: flex;
  align-items: center;
  vertical-align: center;
  position: absolute;
  top: 0;
  bottom: 0;
  right: calc(var(--wcs-native-select-internal-padding-horizontal) - 4px);
  margin: auto 0;
}