@st-namespace 'Autocomplete-deprecated-st-css';
:import {
    -st-from: "../../common/formatters.st.js";
    -st-named: applyStyleMethod, applyOpacity, applyUnit, font, fallback;
}

:import {
    -st-from: "../internal/WixUiCoreComponents/components/CoreAutocomplete/CoreAutocomplete.st.css";
    -st-default: Autocomplete;
}

:import {
    -st-from: "../Input/Input.deprecated.st.css";
    -st-default: Input;
    -st-named: inputStyling, color, colorDisabled, borderColor, borderColorHover, borderColorDisabled;
}

:import {
    -st-from: "../../common/palette.st.css";
    -st-named: errorColor;
}

/* Overrides */
:vars {
    optionColor: value(color);
    optionColorHover: applyOpacity(value(optionColor), 0.6);

    /*
    * The autocomplete component background color
    * @type color
    * @default wix-color-1
    */
    MainBackgroundColor: applyStyleMethod(color, color-1);
    /*
    * The autocomplete popover background color
    * @type color
    * @default wix-color-1
    */
    MainPopoverContentBackgroundColor: applyStyleMethod(color, color-1);
    /*
    * The autocomplete component border color
    * @type color
    * @default wix-color-5
    */
    MainBorderColor: applyStyleMethod(color, color-5);
    /*
    * The autocomplete component border width
    * @type size
    * @default 1px
    */
    MainBorderWidth: applyUnit(1, px);
    /*
    * The autocomplete component border radius
    * @type color
    * @default 0px
    */
    MainBorderRadius: applyUnit(0, px);
    /*
    * The autocomplete component input text color
    * @type color
    * @default wix-color-5
    */
    MainTextColor: applyStyleMethod(color, color-5);
    /*
    * The autocomplete component input text font
    * @type color
    * @default "preset: 'Body-M' | overrides: { size: '16px'}"
    */
    MainTextFont: applyStyleMethod(font, "{theme: 'Body-M', size: '16px'}");
}

/*
 * The autocomplete component background color
 * @type color
 * @default wix-color-1
 */
@property st-global(--wix-ui-tpa-autocomplete-background-color);
/*
  * The autocomplete component border color
  * @type color
  * @default wix-color-5
  */
@property st-global(--wix-ui-tpa-autocomplete-border-color);
/*
  * The autocomplete component border width
  * @type size
  * @default 1px
  */
@property st-global(--wix-ui-tpa-autocomplete-border-width);
/*
  * The autocomplete component border radius
  * @type color
  * @default 0px
  */
@property st-global(--wix-ui-tpa-autocomplete-border-radius);
/*
  * The autocomplete component input text color
  * @type color
  * @default wix-color-5
  */
@property st-global(--wix-ui-tpa-autocomplete-input-text-color);
/*
  * The autocomplete component input text font
  * @type color
  * @default "preset: 'Body-M' | overrides: { size: '16px'}"
  */
@property st-global(--wix-ui-tpa-autocomplete-input-text-font);

/*
 * The autocomplete popover background color
 * @type color
 * @default wix-color-1
 */
@property st-global(--wix-ui-tpa-autocomplete-popover-content-background-color);

.root {
    -st-states: error, theme(enum(line, box));
}

.root {
    -st-extends: Autocomplete;
    -st-mixin: inputStyling;
    width: 100%;
    background-color: value(MainBackgroundColor);
    border-radius: value(MainBorderRadius);
    border-color: applyOpacity(value(MainBorderColor), 0.6);
    border-width: value(MainBorderWidth);
}

.root:theme(line) {
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    border-bottom-width: value(MainBorderWidth);
    border-radius: 0px;
    background-color: value(MainBackgroundColor);
}

.root:hover {
    border-color: value(MainBorderColor);
}

.root:disabled {
    border-color: value(borderColorDisabled);
}

.root:error {
    border-color: value(errorColor);
}

.root::inputComponent {
    -st-mixin: Input;
    display: flex;
    align-items: center;
    border-radius: value(MainBorderRadius);
    background-color: value(MainBackgroundColor);
    border-width: 0px !important;
    /*Border is set on the root*/
}

.root:theme(line)::inputComponent {
    border-top-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
}

.root::inputComponent::nativeInput {
    padding-right: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
    height: unset;
    color: value(MainTextColor);
    background-color: value(MainBackgroundColor);
    border-radius: value(MainBorderRadius);
    font: value(MainTextFont);
    border-width: 0px !important
}

.root:theme(line)::inputComponent::nativeInput {
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: value(MainBorderWidth);
    background-color: value(MainBackgroundColor);
}

.root::inputComponent::nativeInput:focus {
    color: value(MainTextColor);
    background-color: value(MainBackgroundColor);
    font: value(MainTextFont);
}

.root::inputComponent::nativeInput:hover {
    background-color: value(MainBackgroundColor);
    color: value(MainTextColor);
    border-color: applyOpacity(value(MainBorderColor), 0.6);
}

.root::popoverContent {
    margin-left: -1px;
    width: calc(100% + 2px);
    border-color: value(MainBorderColor);
    border-width: value(MainBorderWidth);
    border-radius: value(MainBorderRadius);
    background-color: value(MainBackgroundColor);
}

.root:theme(line)::popoverContent {
    border-radius: 0px;
    background-color: value(MainPopoverContentBackgroundColor) !important;
}

.root::dropdownContent::optionsContainer {
    max-height: 284px;
    border-radius: value(MainBorderRadius);
}

.root::dropdownContent::dropdownOption {
    box-sizing: border-box;
    padding: 10px 14px;
    font: value(MainTextFont);
    color: value(optionColor);
}

.root::dropdownContent::dropdownOption:hovered {
    color: value(optionColorHover);
    background-color: value(MainBackgroundColor);
}

.root::divider:not(:customDivider) {
    background-color: value(optionColor);
}

/*Scrollbar*/
.root::dropdownContent::optionsContainer::-webkit-scrollbar {
    width: 24px;
    background-color: unset;
}

.root::dropdownContent::optionsContainer::-webkit-scrollbar-button {
    height: 6px;
}

.root::dropdownContent::optionsContainer::-webkit-scrollbar-thumb {
    background-color: applyOpacity(value(color), 0.2);
    border-radius: 12px;
    background-clip: padding-box;
    border: 10px solid rgba(0, 0, 0, 0);
    height: 61px;
}

/*Suffix icon*/
.suffix {
    display: flex;
    position: absolute;
    right: 14px;
}

.arrowIcon {
    fill: value(color);
}

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

/*!*RTL*!*/
/*:global(.rtl) .suffix {*/
/*left: 14px;*/
/*right: unset;*/
/*}*/

/*:global(.rtl) .root::inputComponent::nativeInput {*/
/*padding-right: unset;*/
/*padding-left: 42px;*/
/*}*/

/* st-namespace-reference="../../../../src/components/Autocomplete/Autocomplete.deprecated.st.css" */