:import {
  -st-from: "wix-ui-core/index.st.css";
  -st-named: Autocomplete;
}

:import {
  -st-from: "../Input/Input.st.css";
  -st-default: Input;
  -st-named: 
    inputDisabledHoverBorderColor,
    inputDisabledBorderColor,
    inputBorderColor,
    inputHover;
}

:import {
  -st-from: "../Input/InputStates.st.css";
  -st-named: input-large, input-medium, input-small;
}

:import {
  -st-from: "../../typography.st.css";
  -st-named: fontRoman;
}

:import {
  -st-from: "../../colors.st.css";
  -st-named: 
    B10, B20,
    D10, D50, D60,
    WHITE
}

:import {
  -st-from: "../../shadows.st.css";
  -st-named: shadow30;
}

.root {
  -st-extends: Autocomplete;
  -st-states: size(enum(large, medium, small));
  font-family: value(fontRoman);
  width: 100%;
}

.root > [data-hook="popover-content"] {
  border: none;
  border-radius: 8px;
  box-shadow: value(shadow30);
  width: 100%;
  overflow: hidden;
}

.root::inputComponent {
  -st-mixin: Input;
}

.root:size(large)::inputComponent {
  -st-mixin: input-large;
}

.root:size(medium)::inputComponent {
  -st-mixin: input-medium;
}

.root:size(small)::inputComponent {
  -st-mixin: input-small;
}

.root::dropdownContent::dropdownOption {
  white-space: nowrap;
  padding: 8px 20px;
  text-overflow: ellipsis;
  font-size: 16px;
  color: value(D10);
  overflow: hidden;
}

.root::dropdownContent::dropdownOption:hovered {
  background: value(inputHover);
}

.root::dropdownContent::dropdownOption:selected {
  background: value(B10);
  color: value(WHITE);
}

.root::dropdownContent::dropdownOption:selected:hovered {
  background: value(B20);
  color: value(WHITE);
}

.root::dropdownContent::dropdownOption:disabled {
  color: value(D50);
}

.root::dropdownContent::dropdownOption:not(:selectable) {
  padding: 0;
}

.root::divider {
  background-color: value(D60);
  display: flex;
  flex: 1;
}

.root::divider:customDivider {
  padding: 8px 20px;
}

.arrowIcon {
  width: 24px;
  height: 24px;
  fill: value(inputBorderColor);
}

.root:disabled .arrowIcon {
  fill: value(inputDisabledBorderColor);
}

.root:disabled:hover .arrowIcon {
  fill: value(inputDisabledHoverBorderColor);
}