@st-namespace 'FloatingDropdown-st-css';
@st-import [ --wix-color-1, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont, setColor, setFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [ dropdown, divider ] from '../Dropdown/Dropdown.st.css';
@st-import DropdownOption from '../Dropdown/DropdownOption.st.css';
@st-import FloatingDropdownBase from './FloatingDropdownBase.st.css';
@st-import [
  --wst-paragraph-2-color-rgb
] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * The Dropdown Background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-floating-dropdown-main-dropdown-background-color);

/*
 * The Button Text color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-floating-dropdown-main-button-text-color);

/*
 * The Button Text color on disabled state
 * @type color
 * @default --wix-color-3
 */
@property st-global(--wix-ui-tpa-floating-dropdown-main-button-disabled-text-color);

/*
 * The Items Text color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-floating-dropdown-main-item-text-color);

/*
 * The Texts font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '16px', lineHeight: '1.5em'}
 */
@property st-global(--wix-ui-tpa-floating-dropdown-main-text-font);

.root {
    --minWidth: 220px;
    -st-states: removeElementMinWidth;
}

.root .dropdown {
    min-width: var(--minWidth);
    max-width: 100%;
}

.root:removeElementMinWidth .dropdown {
    min-width: unset;
}

.root:removeElementMinWidth .dropdown::popover {
    min-width: var(--minWidth);
    width: 100%;
}

.root .dropdown:content-visible .floatingDropdownBase::arrowIcon {
    transform: rotate(180deg);
}

.root .dropdown:content-visible .floatingDropdownBase {
    background: transparent;
}

.displayInline .dropdown {
    width: auto;
}

.optionDivider {
    -st-mixin: divider;
}

.option {
    -st-extends: DropdownOption;
}

.root .dropdown::dropdownContent {
    background-color: createColor(--wix-ui-tpa-floating-dropdown-main-dropdown-background-color, var(--wix-color-1));
}

.root .dropdown::dropdownContent::dropdownOption:hovered {
    background-color: createColor((--wix-ui-tpa-floating-dropdown-main-item-text-color, --wix-ui-tpa-floating-dropdown-main-button-text-color), var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.06);
}

.root .dropdown::dropdownContent::dropdownOption:selected {
    background-color: createColor((--wix-ui-tpa-floating-dropdown-main-item-text-color, --wix-ui-tpa-floating-dropdown-main-button-text-color), var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.12);
}

.root .dropdown::dropdownContent::dropdownOption:hovered:selected {
    background-color: createColor((--wix-ui-tpa-floating-dropdown-main-item-text-color, --wix-ui-tpa-floating-dropdown-main-button-text-color), var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.16);
}

.root .dropdown::dropdownContent .optionDivider {
    background-color: createColor((--wix-ui-tpa-floating-dropdown-main-item-text-color, --wix-ui-tpa-floating-dropdown-main-button-text-color), var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.option::title {
    white-space: initial;
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "16px", "line-height": "1.5em" }'),
    createFont((--wix-ui-tpa-floating-dropdown-main-text-font, --wst-paragraph-2-overriden-font), 'Body-M'),
    setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-floating-dropdown-main-item-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

.floatingDropdownBase {
    -st-extends: FloatingDropdownBase;
    -st-mixin: setColor(--wix-ui-tpa-floating-dropdown-base-main-text-color, (--wix-ui-tpa-floating-dropdown-main-button-text-color, --wst-paragraph-2-color-rgb)),
    setColor(--wix-ui-tpa-floating-dropdown-base-main-text-color-disabled, (--wix-ui-tpa-floating-dropdown-main-button-disabled-text-color, --wst-system-disabled-color-rgb)),
    createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "size": "16px", "line-height": "1.5em" }'),
    setFont(--wix-ui-tpa-floating-dropdown-base-main-text-font, (--wix-ui-tpa-floating-dropdown-main-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

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