@value (
  varTextDefault,
  varTextSubtle,
  varNeutral600,
  varBorderDefault,
  varBackgroundLight,
  varBackgroundActive
) from "~@xo-union/tk-ui-colors/lib/variables.css";
@value (
  var-sp-down-2,
  var-sp-down-1
) from "~@xo-union/tk-css-spacing/lib/variables.css";
@value ( base ) from "../../css/base.css";
.container {
  position: relative;
}

.list-container {
  background-color: varBackgroundLight;
  border: 1px solid varBorderDefault;
  border-radius: var(--tkww-union-typeahead-suggestion-border-radius, 2px);
  left: 0;
  margin: 8px 0 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1;
}

.list {
  composes: base;
  list-style: none;
  margin: 0;
  max-height: 400px;
  overflow-y: auto;
  padding: 0;
}

.item-base {
  display: block;
  padding: var(--tkww-union-typeahead-suggestion-item-padding, 0.625rem);
  position: relative;
  transition: background-color 0.3s ease;
}
.item-base:hover {
  background-color: var(--tkww-union-fields-typeahead-option-hover-background-color, varBackgroundActive);
  color: var(--tkww-union-fields-typeahead-option-hover-color, varTextDefault);
  cursor: pointer;
  text-decoration: underline;
}

.item {
  composes: item-base;
  color: var(--tkww-union-fields-typeahead-option-color, varTextDefault);
}

.item-is-disabled {
  composes: item;
  color: var(--tkww-union-fields-typeahead-option-color, varTextSubtle);
  pointer-events: none;
}

.item-is-active {
  composes: item-base;
  background-color: varBackgroundActive;
  color: varNeutral600;
}