@value ( varTextDisabled, varBorderDefault ) from "~@xo-union/tk-ui-colors/lib/variables.css";
@value ( var-sp-base ) from "~@xo-union/tk-css-spacing/lib/variables.css";
@value ( base, disabled ) from "../../css/base.css";
@value ( sub-text ) from "../../css/sub-text.css";
@value ( is-neutral, is-valid, is-invalid ) from "../../css/validations.css";
@value ( container ) from "../../css/container.css";
.input {
  composes: base;
  composes: input from "../Field/styles.css";
  text-align: left;
  -webkit-user-select: none;
          user-select: none;
}

.label {
  composes: animated-label from "../../css/animated-label.css";
  cursor: default;
  pointer-events: none;
}

.caret {
  margin-right: var-sp-base;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0.75rem;
}

.disabled {
  composes: disabled;
}

.disabled ~ .caret,
.disabled ~ .label {
  color: var(--tkww-union-fields-select-disabled-caret-color, varTextDisabled);
}

.list {
  composes: base;
  border: 1px solid var(--tkww-union-fields-select-list-border-color, varBorderDefault);
  border-radius: var(--tkww-union-fields-select-list-border-radius, 2px);
  /* ul-reset */
  list-style: none;
  margin: 8px 0 0;
  max-height: 275px;
  overflow-y: auto;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.is-open .list {
  display: block;
}

.is-closed .list {
  display: none;
}