@st-namespace 'DropdownBase-st-css';
@st-import [--wix-color-1, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ setColor, setVar ] from '../../common/formatters.st';
@st-import [ errorColor-rgb ] from '../../common/palette.st.css';
@st-import TPAButton from '../Button/Button.st.css';
@st-import [ --wst-system-error-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
/*
 * Spacing after dropdown icon
 * @type size
 * @default 7px
 */
@property st-global(--wix-ui-tpa-dropdown-suffix-padding-inline-end);

.root {
    --arrowIconSize: calc(calc(24 / 16) * 1em); /*when font size is 16px icons size should be 24px*/

    -st-extends: TPAButton;
    -st-mixin: TPAButton,
        setColor(--wix-ui-tpa-button-main-background-color, null, var(--wix-color-1)),
        setVar(--wix-ui-tpa-button-main-border-width, null, null, 1px),
        setColor(--wix-ui-tpa-button-main-border-color, null, var(--wix-color-5), 0.6),
        setColor(--wix-ui-tpa-button-main-text-color, null, var(--wix-color-5));
    -st-states: error, placeholder, rtl;
    display: flex;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
}

.root::content {
    flex: 1;
    text-align: start;
}

.root:mobile.root:mobile,
.root.root {
    padding: 8px 0;
}

.root:mobile::before,
.root::before {
    width: 12px;
    content: '';
}

.root:mobile::after,
.root::after {
    width: var(--wix-ui-tpa-dropdown-suffix-padding-inline-end, 7px);
    content: '';
}

.root::content {
    margin: initial;
}

.root:error,
.root:error:focus,
.root:error:hover {
    border-color: rgb(var(--wst-system-error-color-rgb, value(errorColor-rgb))) !important;
}

.root:disabled {
    cursor: default;
}

.arrowIcon {
}

.optionIcon::after {
    width: 12px;
    content: '';
}

.root .childrenWrapper{
    display: inline-block;
}

/*--------------------dynamicPaddings------------------------*/

.root:paddingMode(dynamicPaddings):mobile::before,
.root:paddingMode(dynamicPaddings)::before {
    width: 0;
    content: '';
}
.root:paddingMode(dynamicPaddings){
    display: flex;
}

.root:paddingMode(dynamicPaddings)::content{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

.root:paddingMode(dynamicPaddings) .childrenWrapper{
    overflow: visible;
}

.root:paddingMode(dynamicPaddings):mobile::after,
.root:paddingMode(dynamicPaddings)::after {
    width: 0;
    content: '';
}

.root:paddingMode(dynamicPaddings):mobile,
.root:paddingMode(dynamicPaddings) {
    padding: 7px 7px 7px 12px;
}

.root:paddingMode(dynamicPaddings):mobile:rtl,
.root:paddingMode(dynamicPaddings):rtl {
    padding: 7px 12px 7px 7px;
}

.root::affixIcon {
    line-height: 1.5;
    display: flex;
}

.root::affixIcon svg {
    width: var(--arrowIconSize);
    height: var(--arrowIconSize);
}

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