@st-namespace 'ActionsMenuLayout-deprecated-st-css';
:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, fallback;
}
:import {
    -st-from: "./Item/ActionsMenuLayoutItem.deprecated.st.css";
    -st-default: ActionMenuItem;
}

/*Defaults*/
:vars {
    DefaultMenuBackgroundColor: color-1;
    DefaultMenuBorderColor: rgba(255, 255, 255, 0.4);
}

/*Overrides*/
:vars {
    /*
        Menu Background Color
        @default color-1
    */
    MenuBackgroundColor:  --overridable;
    /*
        Menu Border Color
        @default rgba(255, 255, 255, 0.4)
    */
    MenuBorderColor:  --overridable;
    /*
        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;
}

/*
 * Menu Background Color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-actions-menu-layout-menu-background-color);

/*
 * Menu Border Color
 * @type color
 * @default rgba(255, 255, 255, 0.4)
 */
@property st-global(--wix-ui-tpa-actions-menu-layout-menu-border-color);

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

/*Fallbacks*/
:vars {
    menuBackgroundColor: color(fallback(value(MenuBackgroundColor), value(DefaultMenuBackgroundColor)));
    menuBorderColor: color(fallback(value(MenuBorderColor), value(DefaultMenuBorderColor)));
}

.root {
    -st-states: mobile;
    padding: 12px 0;
    max-width: 320px;
    background-color: value(menuBackgroundColor);
    border-style: solid;
    border-width: 1px;
    border-color: value(menuBorderColor);
    box-sizing: border-box;
    box-shadow: 0 0 4px 0 rgba(0,0,0,0.10), 0 4px 8px 0 rgba(0,0,0,0.10);
    list-style: none;
    margin: 0;
}

.root * {
    box-sizing: border-box;
}

.root:mobile {
    width: 100%;
    box-shadow: none;
}

.item {
    -st-extends: ActionMenuItem;
    text-align: initial;

    -st-mixin: ActionMenuItem(
            ItemFont value(ItemFont),
            ItemSubtitleFont value(ItemSubtitleFont)
    );
}

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