@st-namespace 'AddItem-st-css';
@st-import [ --wix-color-1, --wix-color-8, --wix-color-29 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ --wst-primary-background-color-rgb, --wst-links-and-actions-color-rgb, --wst-system-disabled-color-rgb, --wst-system-error-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@st-import [ createColor, createFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [ errorColor, errorColor-rgb ] from '../../common/palette.st.css';
@st-import [ WsrAddItem as AddItem ] from "wix-style-react-tpa/index.es.st.css";


/*
 * Border color
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-add-item-border-color);

/*
 * Background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-add-item-background-color);

/*
 * Text Color
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-add-item-text-color);

/*
 * Text Font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '24px'}
 */
@property st-global(--wix-ui-tpa-add-item-text-font);


.root {
    width: 100%;
    height: 100%;
}

.wsrAddItemRoot {
    -st-extends: AddItem;
    -st-states: rtl, hasError, direction(enum(horizontal, vertical)), noChildren;
}

.wsrAddItemRoot:theme(dashes) {
    outline-color: createColor(--wix-ui-tpa-add-item-border-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
    background-color: createColor(--wix-ui-tpa-add-item-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.wsrAddItemRoot:theme(dashes):hover {
    background-color: createColor(--wix-ui-tpa-add-item-border-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)), 0.1);
    outline-color: createColor(--wix-ui-tpa-add-item-border-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)), 0.6);
}

.wsrAddItemRoot:theme(dashes):active {
    background-color: createColor(--wix-ui-tpa-add-item-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
}

.wsrAddItemRoot:size(tiny),
.wsrAddItemRoot:size(small),
.wsrAddItemRoot:size(medium),
.wsrAddItemRoot:size(large) {
    padding: 12px;
    -st-mixin: createFont(--wix-ui-tpa-add-item-text-font, 'Body-M', '{ "line-height": "24px", "size": "14px" }');
}

.wsrAddItemRoot:size(tiny) svg {
    width: calc((16 / 14) * 1em);
    height: calc((16 / 14) * 1em);
}

.wsrAddItemRoot:size(small) svg {
    width: calc((20 / 14) * 1em);
    height: calc((20 / 14) * 1em);
}

.wsrAddItemRoot:size(medium) svg {
    width: calc((24 / 14) * 1em);
    height: calc((24 / 14) * 1em);
}

.wsrAddItemRoot:size(large) svg {
    width: calc((32 / 14) * 1em);
    height: calc((32 / 14) * 1em);
}

.wsrAddItemRoot:hasError {
    --wix-ui-tpa-add-item-background-color-inner: rgb(var(--wst-primary-background-color-rgb));
    background-color: var(--wix-ui-tpa-add-item-background-color-inner, #FFFFFF);
    --wix-ui-tpa-add-item-outline-color-inner: rgb(var(--wst-system-error-color-rgb));
    outline-color: var(--wix-ui-tpa-add-item-outline-color-inner, value(errorColor));
    opacity: 1;
}

.wsrAddItemRoot:hasError:not(:disabled):theme(dashes):hover,
.wsrAddItemRoot:not(:disabled):focus-visible:theme(dashes):hasError {
    background-color: rgb(var(--wst-system-error-color-rgb, value(errorColor-rgb)), 0.1);
    outline-color: rgb(var(--wst-system-error-color-rgb, value(errorColor-rgb)), 0.6);
}

.wsrAddItemRoot:theme(dashes):disabled {
    background-color: rgb(var(--wst-primary-background-color-rgb, var(--wix-color-1)));
    outline-color: rgb(var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
    opacity: 1;
}

/* Remove WSR focus, opacity is just for now */
.wsrAddItemRoot:not(:disabled):focus-visible:theme(dashes) {
    box-shadow: none;
    outline-color: createColor(--wix-ui-tpa-add-item-border-color, var(--wix-color-8));
    background-color: createColor(--wix-ui-tpa-add-item-border-color, var(--wix-color-8), 0.1);
}

/* direction (vertical / horizontal) */

.wsrAddItemRoot:direction(vertical)::content {
    flex-direction: column;
}

.wsrAddItemRoot:direction(horizontal)::content {
    flex-direction: row;
}

.wsrAddItemRoot:direction(vertical)::content .icon {
    flex-shrink: 1;
}

.wsrAddItemRoot:direction(horizontal)::content .icon {
    flex-shrink: 0;
}

.wsrAddItemRoot:size(tiny)::icon {
    margin: 0;
}

.wsrAddItemRoot:size(tiny):alignItems(left)::icon,
.wsrAddItemRoot:size(tiny):alignItems(right)::icon {
    margin: 0;
}

.wsrAddItemRoot:alignItems(left) {
    padding-left: 8px;
}

.wsrAddItemRoot:direction(vertical)::textWrapper {
    width: 100%;
    padding-top: 2px;
}

.wsrAddItemRoot:direction(vertical) {
    padding-top: 8px;
}

.wsrAddItemRoot:direction(vertical):noChildren::textWrapper {
    padding-top: 0;
}

.wsrAddItemRoot:not(:rtl):direction(horizontal)::textWrapper {
    max-width: 100%;
    width: auto;
    flex-basis: auto;
    padding: 0 0 0 4px;
}

.wsrAddItemRoot:rtl:direction(horizontal)::textWrapper {
    padding: 0 4px 0 0;
}

/*****************/

/* Plus Icon color */

.wsrAddItemRoot:theme(dashes)::content svg {
    color: createColor(--wix-ui-tpa-add-item-text-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
}

.wsrAddItemRoot:hasError::content svg {
    --wix-ui-tpa-add-item-icon-color-inner: rgb(var(--wst-system-error-color-rgb));
    color: var(--wix-ui-tpa-add-item-icon-color-inner, value(errorColor));
}

.wsrAddItemRoot:disabled::content svg {
    color: rgb(var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

.text {
    color: createColor(--wix-ui-tpa-add-item-text-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "24px", "size": "14px" }'),
    createFont((--wix-ui-tpa-add-item-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

.wsrAddItemRoot:hasError .text {
    --wix-ui-tpa-add-item-text-color-inner: rgb(var(--wst-system-error-color-rgb));
    color: var(--wix-ui-tpa-add-item-text-color-inner, value(errorColor));
    -st-mixin: 
    createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "24px", "size": "14px" }'),
    createFont((--wix-ui-tpa-add-item-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

.wsrAddItemRoot:disabled .text {
    color: rgb(var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "24px", "size": "14px" }'),
    createFont((--wix-ui-tpa-add-item-text-font, --wst-paragraph-2-overriden-font), 'Body-M');
}

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