@st-namespace 'Counter-st-css';
@st-import [ --wix-color-1, --wix-color-29, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor,createFont, setColor, setFont, setVar, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [ errorColor-rgb, errorColor as paletteErrorColor ] from  '../../common/palette.st.css';
@st-import [ focusRing ] from "../../common/palette.st.css";
@st-import [ --wst-primary-background-color-rgb, --wst-paragraph-2-color-rgb, --wst-shade-3-color-rgb, --wst-paragraph-2-font, --wst-system-disabled-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';

/*
 * 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.4em'}
 */
@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-29
 */
@property st-global(--wix-ui-tpa-counter-disabled-color);

/*
 * The counter's width
 * @type size
 * @default [Default] size: 104px, [XSmall] size: 80px
 * @playground { "max": 200}
 */
@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-29
 */
@property st-global(--wix-ui-tpa-counter-disabled-border-color);

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

/*
 * The color of the border on hover
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-counter-hover-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);

.root {
    -st-states: error, newErrorMessage, disabled, size(enum(medium, xSmall));
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{}'),
        setFont(--wix-ui-tpa-fieldset-main-label-font, (--wix-ui-tpa-counter-label-font, --wst-paragraph-2-overriden-font)),
        setColor(--wix-ui-tpa-fieldset-main-label-text-color, --wix-ui-tpa-counter-label-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5))),
        setColor(--wix-ui-tpa-fieldset-error-color, --wix-ui-tpa-counter-error-color),
        setVar(--wix-ui-tpa-fieldset-min-message-height, --wix-ui-tpa-counter-error-message-min-height);
}

.group {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: content-box;
    background: createColor(--wix-ui-tpa-counter-main-background-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
    border-style: solid;
    border-color: createColor(--wix-ui-tpa-counter-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.6);
    border-radius: var(--wix-ui-tpa-counter-main-border-radius, 0px);
    border-width: var(--wix-ui-tpa-counter-main-border-width, 1px);
}

:global(#SITE_CONTAINER.focus-ring-active) .root .group:focus-within {
  -st-mixin: focusRing();
}

.group:focus-within,
.group:hover {
    border-color: createColor((--wix-ui-tpa-counter-hover-border-color, --wix-ui-tpa-counter-border-color), var(--wst-color-paragraph-2, var(--wix-color-5)));
}

.root:size(medium) .group {
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.5", "size": "16px" }'),
    createFont((--wix-ui-tpa-counter-main-font, --wst-paragraph-2-overriden-font), 'Body-M');
    width: calc(var(--wix-ui-tpa-counter-main-width, 104px) - 6px);
    padding: 0 2px;
}

.root:size(xSmall) .group {
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1", "size": "12px" }'),
    createFont((--wix-ui-tpa-counter-main-font, --wst-paragraph-2-overriden-font), 'Body-M');
    width: calc(var(--wix-ui-tpa-counter-main-width, 80px) - 2px);
    padding: 0 0px;
}

.root:size(xSmall):not(:newErrorMessage):error .group {
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1", "size": "12px" }'),
    createFont((--wix-ui-tpa-counter-main-font, --wst-paragraph-2-overriden-font), 'Body-M');
    width: calc(var(--wix-ui-tpa-counter-main-width, 80px) - 10px);
    padding: 0 4px;
}

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

.root:error:newErrorMessage .group {
    border-color: createColor(--wix-ui-tpa-counter-error-color, value(errorColor-rgb)) !important;
}

.root:disabled .group {
    border-color: createColor(--wix-ui-tpa-counter-disabled-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

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

.btn {
    align-self: stretch;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: createColor(--wix-ui-tpa-counter-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
    padding: 7px 0;
}

.root:size(xSmall) .btn {
    padding: 5px 4px;
}

.root:size(xSmall):not(:newErrorMessage):error .btn {
    padding: 5px 0px;
}

.root:size(medium) .btn.minus {
    padding-inline-start: 4px;
}

.root:size(medium) .btn.plus {
    padding-inline-end: 4px;
}

.btn[disabled] {
    cursor: default;
    color: createColor(--wix-ui-tpa-counter-disabled-color, var(--wix-color-29));
}

.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);
}

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

.root:not(:newErrorMessage) .error {
    color: value(paletteErrorColor) !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: createColor(--wix-ui-tpa-counter-disabled-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

.root .inputWrapper {
    align-self: stretch;
    flex: 1;
}

.root .counterInput {
    display: flex;
    height: 100%;
}

.root input {
    background: transparent;
    padding: 0;
    border: none;
    text-align: center;
    width: 100%;
    color: createColor(--wix-ui-tpa-counter-text-color, var(--wst-shade-3-color-rgb, var(--wix-color-5)));
    font: inherit;
}

.root:disabled input {
    color: createColor(--wix-ui-tpa-counter-disabled-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

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

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