@st-import Root, [ btn ] from './Counter.st.css';
@st-import [ setFont, setColor, setVar ] from '../../common/formatters.st';

.mainFont {
  -st-mixin:
    setFont(--wix-ui-tpa-counter-main-font, null, 'Body-M', '{"size": "28px", "line-height": "1.5em"}'),
    setVar(--wix-ui-tpa-counter-main-width, null, px, 200)
}

.mainBgColor {
  -st-mixin:
    setColor(--wix-ui-tpa-counter-main-background-color, null, "32, 199, 201"),
}

.mainBgColorOpaque {
  -st-mixin:
    setColor(--wix-ui-tpa-counter-main-background-color, null, "124, 124, 124", "50%"),
}

.mainBorderRadius {
  -st-mixin:
    setVar(--wix-ui-tpa-counter-main-border-radius, null, px, 20),
}

.mainBorderWidth {
  -st-mixin:
    setVar(--wix-ui-tpa-counter-main-border-width, null, px, 5),
}

.textColor {
  -st-mixin:
    setColor(--wix-ui-tpa-counter-text-color, null, "0, 255, 0"),
}

.borderColor {
  -st-mixin:
    setColor(--wix-ui-tpa-counter-border-color, null, "0, 0, 255"),
}

.errorColor {
  -st-mixin:
    setColor(--wix-ui-tpa-counter-error-color, null, "0, 0, 255"),
}

.errorMessageMinHeight {
  -st-mixin:
    setVar(--wix-ui-tpa-counter-error-message-min-height, null, px, 50),
}

.disabledColor {
  -st-mixin:
    setColor(--wix-ui-tpa-counter-disabled-color, null, "0, 255, 0"),
}

.disabledBorderColor {
  -st-mixin:
    setColor(--wix-ui-tpa-counter-disabled-border-color, null, "0, 255, 0"),
}

.labelFont {
  -st-mixin:
    setFont(--wix-ui-tpa-counter-label-font, null, 'Body-M', '{"size": "28px", "line-height": "1.5"}'),
}

.labelColor {
  -st-mixin:
    setColor(--wix-ui-tpa-counter-label-color, null, "255, 0, 0"),
}

.touchAreas {
  -st-mixin:
    setFont(--wix-ui-tpa-counter-main-font, null, 'Body-M', '{"size": "28px", "line-height": "1.5em"}')
    setVar(--wix-ui-tpa-counter-main-width, null, px, 500)
}

.touchAreas .btn {
  outline: 1px dashed red;
}

.touchAreas input {
  outline: 1px dashed red;
}

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