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

:import {
    -st-from: "../../common/palette.st.css";
    -st-named: errorColor;
}

:import {
    -st-from: "wix-style-react-tpa/index.es.st.css";
    -st-named: WsrAddItem as AddItem;
}

/*Defaults*/
:vars {
    DefaultBorderColor: color-8;
    DefaultBackgroundColor: color-1;
    DefaultTextColor: color-8;
    DefaultTextFont: "{theme: 'Body-M', size: '14px', lineHeight: '24px'}";

    DisabledBorderColor: color-3;
    DisabledBackgroundColor: color-1;
    DisabledTextColor: color-3;
}

/*Overrides*/
:vars {
    /*
        Border color
        @default color-8
    */
    BorderColor: --overridable;
    /*
        Background color
        @default color-1
    */
    BackgroundColor: --overridable;
    /*
        Text Color
        @default color-8
    */
    TextColor: --overridable;
    /*
        Text Font
        @default {theme: 'Body-M', size: '14px', lineHeight: '24px'}
    */
    TextFont: --overridable;
}

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

/*Fallbacks*/
:vars {
    CurrentBorderColor: color(fallback(value(BorderColor), value(DefaultBorderColor)));
    CurrentBackgroundColor: color(fallback(value(BackgroundColor), value(DefaultBackgroundColor)));
    CurrentTextColor: color(fallback(value(TextColor), value(DefaultTextColor)));
    CurrentTextFont: fallback(font(value(TextFont)), font(value(DefaultTextFont)));
}

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

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

.wsrAddItemRoot:theme(dashes) {
    outline-color: value(CurrentBorderColor);
    background-color: value(CurrentBackgroundColor);
}

.wsrAddItemRoot:theme(dashes):hover {
    background-color: applyOpacity(value(CurrentBorderColor), 0.1);
    outline-color: applyOpacity(value(CurrentBorderColor), 0.6);
}

.wsrAddItemRoot:theme(dashes):active {
    background-color: value(CurrentBackgroundColor);
}
.wsrAddItemRoot:size(tiny),
.wsrAddItemRoot:size(small),
.wsrAddItemRoot:size(medium),
.wsrAddItemRoot:size(large) {
    padding: 12px;
    font: value(CurrentTextFont);
}

.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 {
    background-color: #FFFFFF;
    outline-color: value(errorColor);
    opacity: 1;
}

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

.wsrAddItemRoot:theme(dashes):disabled {
    background-color: color(value(DisabledBackgroundColor));
    outline-color: color(value(DisabledBorderColor));
    opacity: 1;
}

/* Remove WSR focus, opacity is just for now */
.wsrAddItemRoot:not(:disabled):focus-visible:theme(dashes) {
    box-shadow: none;
    outline-color: value(CurrentBorderColor);
    background-color: applyOpacity(value(CurrentBorderColor), 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: value(CurrentTextColor);
}

.wsrAddItemRoot:hasError::content svg{
    color: value(errorColor);
}
.wsrAddItemRoot:disabled::content svg{
    color: color(value(DisabledTextColor));
}

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


/* Text color */

.text {
    color: value(CurrentTextColor);
    font: value(CurrentTextFont);
}

.wsrAddItemRoot:hasError .text {
    color: value(errorColor);
    font: value(CurrentTextFont);
}

.wsrAddItemRoot:disabled .text {
    color: color(value(DisabledTextColor));
    font: value(CurrentTextFont);
}

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



/* Suggested API for WSR:

This is an API example which should be thinked

:vars {
   dashesBorderColor: value(CurrentBorderColor);
   dashesBackgroundColor: value(CurrentBackgroundColor);

   dashesHoverBorderColor: applyOpacity(value(CurrentBorderColor), 0.6);
   dashesHoverBackgroundColor: applyOpacity(value(CurrentBorderColor), 0.1);

   dashesActiveBackgroundColor: value(CurrentBackgroundColor);

   dashesDisabledBorderColor: color(value(DisabledBorderColor));
   dashesDisabledBackgroundColor: color(value(DisabledBackgroundColor));

   textWrapper_padding: 0 0 0 8px;
   textWrapper_width: auto / 100%;
   textWrapper_maxWidth: 100%;

   *** Add a state for: hideFocusVisible ***

   *** Too Specific? ***
    content_flexDirection : row / column;
    content_flexShrink: 0 / 1;
    textWrapper_flexBasis: auto;
}

 */

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