@st-namespace 'DropdownOption-st-css';
@st-import [ --wix-color-29, --wix-color-5, --wix-color-4 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor, setColor, setFont ] from '../../common/formatters.st';
@st-import [ insetFocusRing ] from '../../common/palette.st.css';

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

/*
 * Dropdown option indent
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-dropdown-option-padding-inline-start);

/*
 * Dropdown option vertical padding
 * @type size
 * @default 8px for both top and bottom
 */
@property st-global(--wix-ui-tpa-dropdown-option-vertical-padding);

/*
 * Spacing between dropdown options prefix and text
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-dropdown-option-title-padding-inline-start);

/*
 * Space between dropdown options suffix and text
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-dropdown-option-title-padding-inline-end);

.root {
    -st-states: withIcon, selectable, sectionTitle, unavailable, indentIcon, textOverflow(enum(ellipsis, wrap)), isFocused;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    padding-top: var(--wix-ui-tpa-dropdown-option-vertical-padding, 8px);
    padding-bottom: var(--wix-ui-tpa-dropdown-option-vertical-padding, 8px);
    padding-inline-start: var(--wix-ui-tpa-dropdown-option-padding-inline-start, 12px);
    padding-inline-end: 12px;
}

:global(#SITE_CONTAINER.focus-ring-active) .root:isFocused {
  -st-mixin: insetFocusRing();
}

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

.title {
    -st-mixin:
        setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-dropdown-option-main-title-text-color, var(--wix-color-5)),
        setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-dropdown-option-main-title-text-font, 'Body-M', '{ "size": "16px", "line-height": "1.5" }');
    display: block;
    overflow: hidden;
    padding-inline-start: var(--wix-ui-tpa-dropdown-option-title-padding-inline-start, 12px);
    padding-inline-end: var(--wix-ui-tpa-dropdown-option-title-padding-inline-end, 12px);
}

.root:sectionTitle .title {
    -st-mixin:
        setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-dropdown-option-main-title-text-color, var(--wix-color-4)),
        setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-dropdown-option-main-title-text-font, 'Body-M', '{ "size": "16px", "line-height": "1.5" }');
    padding: 0;
}

.root:not(:selectable) .title,
.root:unavailable .title {
  -st-mixin:
    setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-dropdown-option-main-item-text-disabled-color, var(--wix-color-29)),
    setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-dropdown-option-main-title-text-font, 'Body-M', '{ "size": "16px", "line-height": "1.5" }');
}

.subtitle {
    -st-mixin:
        setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-dropdown-option-main-title-text-color, var(--wix-color-5)),
        setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-dropdown-option-main-title-text-font, 'Body-M', '{ "size": "16px", "line-height": "1.5" }');
    font-size: 14px !important;
    opacity: 60%;
    margin-top: 4px;
    padding-inline-start: var(--wix-ui-tpa-dropdown-option-title-padding-inline-start, 12px);
    padding-inline-end: var(--wix-ui-tpa-dropdown-option-title-padding-inline-end, 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 */
}

.root:not(:selectable) .subtitle,
.root:unavailable .subtitle {
    -st-mixin:
        setColor(--wix-ui-tpa-text-main-text-color, --wix-ui-tpa-dropdown-option-main-item-text-disabled-color, var(--wix-color-29)),
        setFont(--wix-ui-tpa-text-main-text-font, --wix-ui-tpa-dropdown-option-main-title-text-font, 'Body-M', '{ "size": "16px", "line-height": "1.5" }');
}

.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: createColor(--wix-ui-tpa-dropdown-option-main-item-text-disabled-color, var(--wix-color-29));
}

.root:not(:selectable) .icon svg:not([fill="currentColor"]) path[fill=none],
.root:unavailable .icon svg:not([fill="currentColor"]) path[fill=none] {
    fill: none;
    stroke: createColor(--wix-ui-tpa-dropdown-option-main-item-text-disabled-color, var(--wix-color-29));
}

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

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

.root .icon svg[fill="currentColor"]{
    color: createColor(--wix-ui-tpa-dropdown-option-main-title-text-color, var(--wix-color-5));
}

.root:not(:selectable) .icon svg[fill="currentColor"],
.root:unavailable .icon svg[fill="currentColor"] {
    color: createColor(--wix-ui-tpa-dropdown-option-main-item-text-disabled-color, var(--wix-color-29));
}

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

.root:textOverflow(wrap) .title {
    white-space: normal
}

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