:host {
  --wcs-form-field-gap: var(--wcs-semantic-spacing-small);
  --wcs-form-field-prefix-suffix-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-form-field-prefix-icon-color: var(--wcs-semantic-color-foreground-primary);
  --wcs-form-field-prefix-value-color: var(--wcs-semantic-color-text-inverse);
  --wcs-form-field-prefix-placeholder-color: var(--wcs-semantic-color-text-inverse);
  display: flex;
  flex-direction: column;
  gap: var(--wcs-form-field-gap);
  /* Components in the prefix slot */
  /* Components in the suffix slot */
}
:host .input-container {
  display: flex;
}
:host ::slotted([slot=prefix]) {
  /* Select */
  --wcs-select-value-color: var(--wcs-semantic-color-text-inverse);
  --wcs-select-placeholder-color: var(--wcs-semantic-color-text-inverse);
  --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-default);
  --wcs-select-control-arrow-color: var(--wcs-form-field-prefix-icon-color);
  --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);
  --wcs-select-control-border-width-default: 0;
  --wcs-select-control-border-style-focus: dashed;
  --wcs-select-control-border-color-focus: var(--wcs-semantic-color-border-focus-base);
  /* Native select */
  --wcs-native-select-value-color: var(--wcs-semantic-color-text-inverse);
  --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-inverse);
  --wcs-native-select-arrow-color: var(--wcs-form-field-prefix-icon-color);
  --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-default);
  --wcs-native-select-border-width: 0;
  --wcs-native-select-border-color-focus: var(--wcs-semantic-color-border-focus-base);
  --wcs-native-select-border-style-focus: dashed;
  --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);
  --wcs-native-select-option-color: var(--wcs-semantic-color-text-inverse);
  /* Button */
  --wcs-button-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);
}
:host ::slotted([slot=suffix]) {
  --wcs-button-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;
  --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;
  --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;
}

/* Disabled components in the prefix slot */
::slotted([slot=prefix][disabled]),
::slotted([slot=prefix]:disabled),
::slotted([slot=prefix][aria-disabled=true]),
::slotted([slot=prefix][data-disabled]) {
  --wcs-semantic-color-background-control-disabled: var(--wcs-semantic-color-background-action-primary-disabled);
  --wcs-semantic-color-text-disabled: var(--wcs-semantic-color-foreground-disabled);
  --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-disabled);
  --wcs-select-value-color: var(--wcs-semantic-color-text-disabled);
  --wcs-select-placeholder-color: var(--wcs-semantic-color-text-disabled);
  --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-disabled);
  --wcs-native-select-placeholder-color: var(--wcs-semantic-color-text-disabled);
  --wcs-native-select-value-color: var(--wcs-semantic-color-text-disabled);
}

/* Hover and press states */
::slotted([slot=prefix]:hover:not([disabled]):not([data-disabled])) {
  --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-hover);
  --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-hover);
}

::slotted([slot=prefix]:active:not([disabled]):not([data-disabled])) {
  --wcs-select-control-background-color: var(--wcs-semantic-color-background-action-primary-press);
  --wcs-native-select-background-color: var(--wcs-semantic-color-background-action-primary-press);
}

.input-container {
  display: flex;
}

::slotted(wcs-select:not([slot=prefix])) {
  width: 100%;
}

::slotted(wcs-native-select:not([slot=prefix])) {
  width: 100%;
}

/* Components in the center that are prefixed */
:host(.has-prefix) ::slotted(:not([slot=prefix])) {
  --wcs-input-border-radius-left: 0;
  --wcs-select-control-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;
  --wcs-native-select-border-radius: 0 var(--wcs-form-field-prefix-suffix-border-radius) var(--wcs-form-field-prefix-suffix-border-radius) 0;
}

/* Components in the center that are suffixed */
:host(.has-suffix) ::slotted(:not([slot=suffix])) {
  --wcs-input-border-radius-right: 0;
  --wcs-select-control-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);
  --wcs-native-select-border-radius: var(--wcs-form-field-prefix-suffix-border-radius) 0 0 var(--wcs-form-field-prefix-suffix-border-radius);
}

/* Components in the center that are prefixed AND suffixed */
:host(.has-prefix.has-suffix) ::slotted(:not([slot=prefix]):not([slot=suffix])) {
  --wcs-input-border-radius-left: 0;
  --wcs-input-border-radius-right: 0;
  --wcs-select-control-border-radius: 0;
  --wcs-native-select-border-radius: 0;
}