@st-namespace 'ActionsMenuLayoutItem-deprecated-st-css';
:import {
    -st-from: "../../../common/formatters.st";
    -st-named: color, fallback, font, applyOpacity;
}

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

/*Defaults*/
:vars {
    ItemFontDesktop: "{theme: 'Body-M', size: '16px', lineHeight: '24px'}";
    ItemSubtitleFontDesktop: "{theme: 'Body-M', size: '14px', lineHeight: '20px'}";
    ItemFontMobile: "{theme: 'Body-M', size: '14px', lineHeight: '24px'}";
    ItemSubtitleFontMobile: "{theme: 'Body-M', size: '12px', lineHeight: '20px'}";
}

/*Overrides*/
:vars {
    /*
        The font of the content text
        @default: Desktop: {theme: 'Body-M', size: '16px', lineHeight: '24px'}, Mobile: {theme: 'Body-M', size: '14px', lineHeight: '24px'}
     */
    ItemFont:  --overridable;
    /*
        The font of the subtitle text
        @default: Desktop: {theme: 'Body-M', size: '14px', lineHeight: '20px'}, Mobile: {theme: 'Body-M', size: '12px', lineHeight: '20px'}
     */
    ItemSubtitleFont:  --overridable;
}

/*
 * The font of the content text
 * @type font
 * @default: Desktop: preset: 'Body-M' | overrides: { size: '16px', lineHeight: '24px'}, Mobile: preset: 'Body-M' | overrides: { size: '14px', lineHeight: '24px'}
 */
@property st-global(--wix-ui-tpa-actions-menu-layout-item-item-font);

/*
 * The font of the subtitle text
 * @type font
 * @default: Desktop: preset: 'Body-M' | overrides: { size: '14px', lineHeight: '20px'}, Mobile: preset: 'Body-M' | overrides: { size: '12px', lineHeight: '20px'}
 */
@property st-global(--wix-ui-tpa-actions-menu-layout-item-item-subtitle-font);

.root {
    -st-states: disabled, mobile, withIcon, rtl, alignment(enum(left, center, right));
    padding: 8px 24px;
    cursor: pointer;
    width: calc(100% + 2px);
    position: relative;
    left: -1px;
    right: -1px;
}

.root:hover,
.root:not(:mobile):focus {
    background-color: applyOpacity(color(color-5), 0.06);
}

.container {
    display: inline-flex;
    align-items: center;
}

.iconContainer {
    display: flex;
    align-self: stretch;
}

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

.iconContainer::after {
    content: '';
    width: 12px;
    height: 100%;
}

.root:disabled {
    opacity: 0.3;
    cursor: default;
}

.root:disabled:hover {
    background-color: inherit;
}

.text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.content {
    -st-extends: Text;
    -st-mixin: Text(
        MainTextFont fallback(font(value(ItemFont)), font(value(ItemFontDesktop)))
    );
    width: 100%;
}

.root:mobile .content {
    -st-mixin: Text(
        MainTextFont fallback(font(value(ItemFont)), font(value(ItemFontMobile)))
    );
}

.subtitle {
    -st-extends: Text;
    -st-mixin: Text(
        MainTextColor applyOpacity(color(color-5), 0.6),
        MainTextFont fallback(font(value(ItemSubtitleFont)), font(value(ItemSubtitleFontDesktop)))
    );
    width: 100%;
    margin-top: 4px;
}

.root:mobile .subtitle {
    -st-mixin: Text(
        MainTextFont fallback(font(value(ItemSubtitleFont)), font(value(ItemSubtitleFontMobile)))
    );
}

.textContainer {
    display: flex;
}

.root:alignment(left) {
    text-align: left;
}

.root:alignment(center) {
    text-align: center;
}

.root:alignment(right) {
    text-align: right;
}

.root:alignment(center):withIcon .container {
    margin-left: -36px;
}

.root:rtl:alignment(center):withIcon .container {
    margin-left: unset;
    margin-right: -36px;
}

/* st-namespace-reference="../../../../../src/components/ActionsMenuLayout/Item/ActionsMenuLayoutItem.deprecated.st.css" */