@st-namespace 'Counter-deprecated-st-css';
@property st-global(--wut-error-color);

:import {
    -st-from: "../../common/formatters.st";
    -st-named: applyUnit, color, fallback, font, value, applyOpacity, unit, calculate;
}

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

:import {
    -st-from: '../internal/Fieldset/Fieldset.deprecated.st.css';
    -st-default: Fieldset;
}

/*Defaults*/
:vars {
    DefaultColor: color-5;
    DefaultDisabledColor: color-3;
    DefaultErrorColor: value(paletteErrorColor);
    DefaultFont: "{theme: 'Body-M', size: '16px', lineHeight: '1.5'}";
    DefaultXSmallFont: "{theme: 'Body-M', size: '12px', lineHeight: '1'}";
    DefaultBackgroundColor: color-1;
    DefaultWidth: 104px;
    DefaultWidthXsmall: 80px;
    DefaultMainBorderRadius: 0;
    DefaultMainBorderWidth: 1;
    DefaultDisabledBorderColor: color-3;
    DefaultBorderColor: color-5;
    defaultHorizontalPadding: 6px;
    defaultVerticalPadding: 7px;
    defaultHorizontalXsmallPadding: 4px;
    defaultVerticalXsmallPadding: 5px;
}

/*Overrides*/
:vars {
    /*
        counter's font
        @default Default "{theme: 'Body-M', size: '16px', lineHeight: '1.5em'}", XSmall "{theme: 'Body-M', size: '12px', lineHeight: '1em'}"
    */
    MainFont: --overridable;
    /*
        Label's font
        @default {theme: 'Body-M', size: '14px', lineHeight: '1.4'}
    */
    LabelFont: --overridable;
    /*
        Label's font color
        @default color-5
    */
    LabelColor: --overridable;
    /*
        The counter's background color
        @default color-1
    */
    MainBackgroundColor: --overridable;
    /*
        The counter's text and buttons color
        @default color-5
    */
    TextColor: --overridable;
    /*
        The counter's disabled color
        @default color-3
    */
    DisabledColor: --overridable;
    /*
        The counter's width
        @default Default size: 104px, XSmall size: 80px
    */
    MainWidth: --overridable;
    /*
        The corner radius of the component
        @default Default size: 0px
    */
    MainBorderRadius: --overridable;
    /*
        The width of the component’s border
        @default Default size: 1px
    */
    MainBorderWidth: --overridable;
    /*
        the color of border when disabled
        @default color-3
    */
    DisabledBorderColor: --overridable;
    /*
        The color of the border
        @default color-5
    */
    BorderColor: --overridable;
    /*
        The color representing an error
        @default #DF3131
    */
    ErrorColor: --overridable;
    /*
        A minimum height for the error message element
    */
    ErrorMessageMinHeight: --overridable;
}

/*
 * counter's font
 * @type font
 * @default [Default] preset: 'Body-M' | overrides: { size: '16px', lineHeight: '1.5em'}, [XSmall] preset: 'Body-M' | overrides: { size: '12px', lineHeight: '1em'}"
 */
@property st-global(--wix-ui-tpa-counter-main-font);

/*
 * Label's font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-counter-label-font);

/*
 * Label's font color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-counter-label-color);

/*
 * The counter's background color
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-counter-main-background-color);

/*
 * The counter's text and buttons color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-counter-text-color);

/*
 * The counter's disabled color
 * @type color
 * @default --wix-color-3
 */
@property st-global(--wix-ui-tpa-counter-disabled-color);

/*
 * The counter's width
 * @type size
 * @default [Default] size: 104px, [XSmall] size: 80px
 */
@property st-global(--wix-ui-tpa-counter-main-width);

/*
 * The corner radius of the component
 * @type size
 * @default Default size: 0px
 */
@property st-global(--wix-ui-tpa-counter-main-border-radius);

/*
 * The width of the component’s border
 * @type size
 * @default Default size: 1px
 */
@property st-global(--wix-ui-tpa-counter-main-border-width);

/*
 * the color of border when disabled
 * @type color
 * @default --wix-color-3
 */
@property st-global(--wix-ui-tpa-counter-disabled-border-color);

/*
 * The color of the border
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-counter-border-color);

/*
 * The color representing an error
 * @type color
 * @default #DF3131
 */
@property st-global(--wix-ui-tpa-counter-error-color);

/*
 * A minimum height for the error message element
 * @type size
 */
@property st-global(--wix-ui-tpa-counter-error-message-min-height);

:vars {
    counterFont: fallback(font(value(MainFont)), font(value(DefaultFont)));
    counterXSmallFont: fallback(font(value(MainFont)), font(value(DefaultXSmallFont)));
    counterColor: color(fallback(value(TextColor), value(DefaultColor)));
    counterBackgroundColor: color(fallback(value(MainBackgroundColor), value(DefaultBackgroundColor)));
    counterDisabledColor: color(fallback(value(DisabledColor), value(DefaultDisabledColor)));
    counterWidth: fallback(value(MainWidth), value(DefaultWidth));
    counterWidthXsmall: fallback(value(MainWidth), value(DefaultWidthXsmall));
    mainBorderRadius: fallback(value(MainBorderRadius), value(DefaultMainBorderRadius));
    mainBorderWidth: fallback(value(MainBorderWidth), value(DefaultMainBorderWidth));
    disabledBorderColor: color(fallback(value(DisabledBorderColor), value(DefaultDisabledBorderColor)));
    borderColor: color(fallback(value(BorderColor), value(DefaultBorderColor)));
    doubleBorderWidth: calculate("*", 2, unit(value(DefaultMainBorderWidth), px));
    errorColor: color(fallback(value(ErrorColor), value(DefaultErrorColor)));
}

.root {
    -st-states: error, newErrorMessage, disabled, size(enum(medium, xSmall));
    -st-mixin: Fieldset(
        MainLabelFont font(value(LabelFont)),
        MainLabelTextColor color(value(LabelColor)),
        ErrorColor value(errorColor),
        MinMessageHeight unit(value(ErrorMessageMinHeight), px)
    )
}

.group {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: content-box;
    background: color(value(counterBackgroundColor));
    border-style: solid;
    border-color: color(value(borderColor));
    border-radius: unit(value(mainBorderRadius), px);
    border-width: unit(value(mainBorderWidth), px);
}

.group:focus-within,
.group:hover {
    border-color: applyOpacity(color(value(counterColor)), 1);
}

.root:size(medium) .group {
    font: value(counterFont);
    width: calculate("-", value(counterWidth), value(doubleBorderWidth), calculate("*", 2, value(defaultHorizontalPadding)));
    padding: 0 value(defaultHorizontalPadding);
}

.root:size(xSmall) .group {
    font: value(counterXSmallFont);
    width: calculate("-", value(counterWidthXsmall), value(doubleBorderWidth), calculate("*", 2, value(defaultHorizontalXsmallPadding)));
    padding: 0 value(defaultHorizontalXsmallPadding);
}

.root:error:not(:newErrorMessage) .group {
    border-color: value(DefaultErrorColor) !important;
}

.root:error:newErrorMessage .group {
    border-color: fallback(value(errorColor), var(--wut-error-color, value(DefaultErrorColor))) !important;
}

.root:disabled .group {
    border-color: color(value(disabledBorderColor));
}

.errorIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  order: 3;
}

.btn {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: color(value(counterColor));
    padding: value(defaultVerticalPadding) 0;
}

.root:size(xSmall) .btn {
    padding: value(defaultVerticalXsmallPadding) 0;
}

.btn[disabled] {
    cursor: default;
    color: color(value(counterDisabledColor));
}

.btnIcon {
    width: calc((24 / 16) * 1em);
    height: calc((24 / 16) * 1em);
    font: inherit;
}

.root:size(xSmall) .btnIcon {
    width: calc((16 / 12) * 1em);
    height: calc((16 / 12) * 1em);
}

.root:size(xSmall) .error {
    width: calc((8 / 12) * 1em);
    height: calc((8 / 12) * 1em);
}

.error {
    width: calc((20.5 / 16) * 1em);
    height: calc((20.5 / 16) * 1em);
    font: inherit;
    display: block;
}

.root:not(:newErrorMessage) .error {
    color: value(DefaultErrorColor) !important;
}

.root:size(medium) .error {
  width: calc((18.45 / 12) * 1em);
  height: calc((18.45 / 12) * 1em);
}

.root:size(xSmall) .error {
    width: calc((13.74 / 12) * 1em);
    height: calc((13.74 / 12) * 1em);
}

.root:disabled .btn {
    color: color(value(counterDisabledColor));
}

.root .inputWrapper {
    flex: 1;
    order: 2;
}

.root input {
    background: color(value(counterBackgroundColor));
    padding: 0;
    border: none;
    text-align: center;
    width: 100%;
    color: value(counterColor);
    font: inherit;
}

.root:disabled input {
    color: color(value(counterDisabledColor));
}

/* Removing browser-specific default buttons inside input element */
.root input::-webkit-outer-spin-button,
.root input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.root input[type=number] {
    -moz-appearance: textfield;
}

.root input::-ms-clear {
    display: none;
}

.minus {
    order: 1;
}

.plus {
    order: 4;
}

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