@st-namespace 'FloatingDropdownBase-st-css';
@st-import [ --wix-color-29, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, createFont ] from '../../common/formatters.st';
@st-import TPAButton from '../TextButton/TextButton.st.css';
@st-import [
  --wst-paragraph-2-color-rgb,
  --wst-system-disabled-color-rgb
] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * The Button Text color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-floating-dropdown-base-main-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-base-main-text-font);

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

.root {
    -st-states: mobile, disabled;
    cursor: pointer;
}

.arrowIcon {
    height: 1.5em;
    width: 1.5em;
    margin: 0 0.25em;
    flex-shrink: 0;
}

.btn {
    -st-extends: TPAButton;
    display: flex;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
    transition: none;
    padding: 8px 0;
    width: 100%;
}

.displayBlock .btn {
    width: 100%;
}

.displayBlock .content {
    justify-content: space-between;
}

.content {
    display: flex;
    align-items: center;
    width: 100%;
}

.textContent {
    overflow: hidden;
    display: flex;
}

.label {
    display: flex;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.selectedValue {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    min-width: 0;
    flex: 1 1 0;
}

.label::after {
    width: 4px;
    content: '';
}

.btn::content {
    flex: 1;
    text-align: start;
    max-width: 100%;
}

.btn:disabled {
    cursor: default;
}

.root:disabled {
    cursor: default;
}

.root:mobile {
    position: relative;
}

.root:not(.displayBlock):mobile {
    display: inline-block;
}

.root:mobile select {
    background-color: transparent;
    border: none;
    min-width: 0;
    outline: none;
    appearance: none;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent;
}

.root:mobile:disabled select {
    cursor: default;
}

.root .content {
    color: createColor(--wix-ui-tpa-floating-dropdown-base-main-text-color, var(--wix-color-5));
    -st-mixin: createFont(--wix-ui-tpa-floating-dropdown-base-main-text-font, 'Body-M', '{"size": "16px", "line-height": "1.5em"}');
}

.root .arrowIcon {
    color: createColor(--wix-ui-tpa-floating-dropdown-base-main-text-color, var(--wix-color-5));
}

.root:disabled .content .textContent,
.root:disabled .content .arrowIcon {
    color: createColor(--wix-ui-tpa-floating-dropdown-base-main-text-color-disabled, var(--wix-color-29));
}

.root:not(:disabled):hover .content .textContent,
.root:not(:disabled):hover .content .arrowIcon {
    color: createColor(--wix-ui-tpa-floating-dropdown-base-main-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.7);
}

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