@st-namespace 'DropdownOption-deprecated-st-css';
:import {
    -st-from: "../Input/Input.deprecated.st.css";
    -st-named: colorPlaceholder;
}

:import {
    -st-from: "../Text/Text.deprecated.st.css";
    -st-default: TPAText;
}

:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, fallback, applyOpacity, font;
}

:vars {
    DefaultTitleTextColor: "color-5";
    DefaultTitleTextFont: "{theme: 'Body-M', size: '16px', lineHeight: '1.5'}";
}

/*Overrides*/
:vars {
    MainTitleTextColor: --overridable;
    MainTitleTextFont: --overridable;
    MainItemTextDisabledColor: --overridable;
}

/*
 * Text color
 * @type color
 */
@property st-global(--wix-ui-tpa-dropdown-option-main-title-text-color);

/*
 * Text font
 * @type font
 */
@property st-global(--wix-ui-tpa-dropdown-option-main-title-text-font);

/*
 * Disabled text color
 * @type color
 */
@property st-global(--wix-ui-tpa-dropdown-option-main-item-text-disabled-color);

:vars {
    CurrentTitleTextColor: color(fallback(value(MainTitleTextColor), value(DefaultTitleTextColor)));
    CurrentTitleTextFont: fallback(font(value(MainTitleTextFont)), font(value(DefaultTitleTextFont)));
    CurrentItemTextDisabledColor: color(fallback(value(MainItemTextDisabledColor), value(colorPlaceholder)));
}

.root {
    -st-states: withIcon, selectable, sectionTitle, unavailable, indentIcon, textOverflow(enum(ellipsis, wrap));
    box-sizing: border-box;
    display: flex;
    width: 100%;
    padding: 8px 12px;
}

.root.overrideStyleParams .title {
 -st-mixin: TPAText(
        MainTextColor value(CurrentTitleTextColor),
        MainTextFont value(CurrentTitleTextFont)
    );
}

.overrideStyleParams {
    -st-extends: root;
}

.contentWrapper {
    width: 0;
    flex-grow: 1;
}

.title {
    padding: 0 12px;
    display: block;
    overflow: hidden;
}

.root:not(:selectable) .title {
    -st-mixin: TPAText(
        MainTextColor value(colorPlaceholder)
    );
}

.overrideStyleParams:not(:selectable) .title,
.overrideStyleParams:unavailable .title {
    -st-mixin: TPAText(
        MainTextColor value(CurrentItemTextDisabledColor),
        MainTextFont value(CurrentTitleTextFont)
    );
}

.overrideStyleParams:sectionTitle .title {
    -st-mixin: TPAText(
        MainTextColor applyOpacity(value(CurrentTitleTextColor), 0.6),
        MainTextFont value(CurrentTitleTextFont)
    );
}

.root:sectionTitle .title {
    padding: 0;
}

.overrideStyleParams .subtitle {
     -st-mixin: TPAText(
        MainTextColor value(CurrentTitleTextColor),
        MainTextFont value(CurrentTitleTextFont)
    );
}

.overrideStyleParams:not(:selectable) .subtitle,
.overrideStyleParams:unavailable .subtitle {
    -st-mixin: TPAText(
        MainTextColor value(CurrentItemTextDisabledColor),
        MainTextFont value(CurrentTitleTextFont)
    );
}

.subtitle {
    font-size: 14px !important;
    opacity: 60%;
    margin-top: 4px;
    padding: 0 12px;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* number of lines to show */
    max-height: 40px;      /* fallback */
}

.suffix {
    align-self: center;
    flex-shrink: 0;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    width: 24px;
    flex-shrink: 0;
}

.root:not(:selectable) .icon svg:not([fill="currentColor"]) path,
.root:unavailable .icon svg:not([fill="currentColor"]) path {
    fill: color(value(CurrentItemTextDisabledColor));
}

.root:not(:selectable) .icon svg:not([fill="currentColor"]) path[fill=none],
.root:unavailable .icon svg:not([fill="currentColor"]) path[fill=none] {
    fill: none;
    stroke: color(value(CurrentItemTextDisabledColor));
}

.root:indentIcon .icon {
    margin-inline-start: 12px;
}

/*--------------------- new icons -------------------------*/

.overrideStyleParams .icon svg[fill="currentColor"]{
    color: color(value(CurrentTitleTextColor));
}

.root:not(:selectable) .icon svg[fill="currentColor"],
.root:unavailable .icon svg[fill="currentColor"] {
    color: color(value(CurrentItemTextDisabledColor));
}


.root:textOverflow(ellipsis) .title {
    text-overflow: ellipsis;
    white-space: nowrap;
}
.root:textOverflow(wrap) .title {
    white-space: normal
}

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