@st-namespace 'Autocomplete-st-css';
@st-import [ --wix-color-5, --wix-color-1, --wix-color-4 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ --wst-primary-background-color-rgb, --wst-paragraph-2-color-rgb, --wst-shade-3-color-rgb, --wst-system-disabled-color-rgb, --wst-system-error-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@st-import [ errorColor] from '../../common/palette.st.css';
@st-import [ createFont, createColor, setColor, createFontWithOverrides ] from '../../common/formatters.st';
@st-import Autocomplete from '../internal/WixUiCoreComponents/components/CoreAutocomplete/CoreAutocomplete.st.css';
@st-import Input, [inputStyling] from "../Input/Input.st.css";

/*
 * 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 size
 * @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 font
 * @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);

/*
 * Autocomplete placeholder text color
 * @type color
 * @default --wst-shade-3-color
 */
@property st-global(--wix-ui-tpa-autocomplete-input-placeholder-text-color);

/*
 * Autocomplete placeholder font
 * @type font
 */
@property st-global(--wix-ui-tpa-autocomplete-placeholder-text-font);
.root {
    -st-states: error, theme(enum(line, box));
}

.root {
    -st-extends: Autocomplete;
    -st-mixin: inputStyling;
    /*Apply same styling as the Input*/
    width: 100%;
    background-color: createColor(--wix-ui-tpa-autocomplete-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1))); 
    border-radius: var(--wix-ui-tpa-autocomplete-border-radius, 0px);
    border-color: createColor(--wix-ui-tpa-autocomplete-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.6);
    border-width: var(--wix-ui-tpa-autocomplete-border-width, 1px);
}

.root:theme(line) {
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: var(--wix-ui-tpa-autocomplete-border-width, 1px);
    border-radius: 0px;
    background-color: createColor(--wix-ui-tpa-autocomplete-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)), 0);
}

.root:hover {
    border-color: setColor(--wix-ui-tpa-autocomplete-border-color, var(--wix-color-5));
}

.root:disabled {
    border-color: rgb(var(--wst-system-disabled-color-rgb, var(--wix-color-5)), 0.3);
}

.root:error {
    --wix-ui-tpa-autocomplete-error-border-color: rgb(var(--wst-system-error-color-rgb));
    border-color: var(--wix-ui-tpa-autocomplete-error-border-color, value(errorColor));
}

.root::inputComponent {
    -st-mixin: Input;
    display: flex;
    align-items: center;
    border-radius: var(--wix-ui-tpa-autocomplete-border-radius, 0px);
    background-color: createColor(--wix-ui-tpa-autocomplete-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
    border-width: 0px !important;
    /*Border is set on the root*/
}

.root:theme(line).root::inputComponent {
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: var(--wix-ui-tpa-autocomplete-border-width, 1px);
    background-color: setColor(--wix-ui-tpa-autocomplete-background-color, var(--wix-color-1), 0);
}


.root::inputComponent::nativeInput {
    padding-right: 42px;
    padding-top: 8px;
    padding-bottom: 8px;
    height: unset;
    color: createColor(--wix-ui-tpa-autocomplete-input-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
    background-color: createColor(--wix-ui-tpa-autocomplete-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
    border-radius: var(--wix-ui-tpa-autocomplete-border-radius, 0px);
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "16px" }'),
    createFont((--wix-ui-tpa-autocomplete-input-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
    border-width: 0px !important
}

.root::inputComponent::nativeInput::placeholder {
    color: createColor(--wix-ui-tpa-autocomplete-input-placeholder-text-color, var(--wst-shade-3-color-rgb, var(--wix-color-4)));
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "16px" }'),
    createFont((--wix-ui-tpa-autocomplete-placeholder-text-font, --wst-paragraph-2-overriden-font), null);
}

.root:disabled::inputComponent::nativeInput {
    color: rgb(var(--wst-system-disabled-color-rgb));
}

.root:theme(line).root::inputComponent::nativeInput {
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: var(--wix-ui-tpa-autocomplete-border-width, 1px);
    background-color: setColor(--wix-ui-tpa-autocomplete-background-color, var(--wix-color-1), 0);
}

.root::inputComponent::nativeInput:focus {
    color: setColor(--wix-ui-tpa-autocomplete-input-text-color, var(--wix-color-5));
    background-color: setColor(--wix-ui-tpa-autocomplete-background-color, var(--wix-color-1));
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "16px" }'),
    createFont((--wix-ui-tpa-autocomplete-input-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

.root::inputComponent::nativeInput:hover {
    background-color: setColor(--wix-ui-tpa-autocomplete-background-color, var(--wix-color-1));
    color: createColor(--wix-ui-tpa-autocomplete-input-text-color, var(--wst-paragraph-2-color-rgb));
    border-color: setColor(--wix-ui-tpa-autocomplete-border-color, var(--wix-color-5));
}

.root::popoverContent {
    margin-left: -1px;
    width: calc(100% + 2px);
    border-color: setColor(--wix-ui-tpa-autocomplete-border-color, var(--wix-color-5));
    border-width: var(--wix-ui-tpa-autocomplete-border-width, 1px);
    border-radius: var(--wix-ui-tpa-autocomplete-border-radius, 0px);
    background-color: setColor(--wix-ui-tpa-autocomplete-background-color, var(--wix-color-1));
}

.root:theme(line)::popoverContent {
    border-radius: 0px;
    border-color: setColor(--wix-ui-tpa-autocomplete-border-color, var(--wix-color-5));
    background-color: setColor(--wix-ui-tpa-autocomplete-background-color, var(--wix-color-1));
}


.root::dropdownContent::optionsContainer {
    max-height: 284px;
    border-radius: var(--wix-ui-tpa-autocomplete-border-radius, 0px);
}

.root::dropdownContent::dropdownOption {
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "16px" }'),
    createFont((--wix-ui-tpa-autocomplete-input-text-font,--wst-paragraph-2-overriden-font), 'Body-M');
    box-sizing: border-box;
    padding: 10px 14px;
    color: setColor(--wix-ui-tpa-autocomplete-input-text-color, var(--wix-color-5));
}

.root::dropdownContent::dropdownOption:hovered {
    background-color: unset !important;
    color: createColor(--wix-ui-tpa-autocomplete-input-text-color, var(--wix-color-5), 0.6);
}

.root::divider:not(:customDivider) {
    background-color: rgb(var(--wix-color-5));
}

/*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: rgb(var(--wix-color-5), 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: rgb(var(--wix-color-5));
}

.root:disabled .arrowIcon {
    fill: rgb(var(--wix-color-5), 0.3);
}

.root:disabled .suffix svg,
.root:disabled .arrowIcon {
    fill: rgb(var(--wst-system-disabled-color-rgb, var(--wix-color-3)));
}

/*!*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.st.css" */