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

:import {
    -st-from: "../Input/Input.st.css";
    -st-default: Input;
    -st-named: 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, B30, B40,
  D10, D50,
WHITE;
}

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

.root {
    -st-extends: AddressInput;
    -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;
}

.search {
    width: 24px;
    height: 24px;
    fill: value(B10);
}

.root::inputComponent:disabled .search {
    fill: value(B40);
}

.root::inputComponent:disabled:hover .search {
    fill: value(B30);
}