@st-namespace 'CheckboxGroup-st-css';
@st-import [ setColor, setFont, setVar, createFont, createFontWithOverrides ] from "../../common/formatters.st";
@st-import [ errorColor-rgb ] from "../../common/palette.st.css";

/*
 * The label text color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-checkbox-group-label-color);

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

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

/*
 * The spacing between checkbox elements in horizontal layout
 * @type size
 * @default 15px
 */
@property st-global(--wix-ui-tpa-checkbox-group-horizontal-spacing);

.root {
    -st-states: disabled, layout( enum(horizontal, vertical) ), error, fluid, newErrorMessage;
    -st-mixin:
        createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{}'),
        setFont(--wix-ui-tpa-fieldset-main-label-font, --wst-paragraph-2-overriden-font, null),
        setColor(--wix-ui-tpa-fieldset-main-label-text-color, (--wst-paragraph-2-color-rgb, --wix-ui-tpa-checkbox-group-label-color)),
        setColor(--wix-ui-tpa-fieldset-error-color, --wix-ui-tpa-checkbox-group-error-color, value(errorColor-rgb)),
        setVar(--wix-ui-tpa-fieldset-min-message-height, --wix-ui-tpa-checkbox-group-error-message-min-height);

    display: inline-block;
    margin: 0;
    padding: 0;
    border: none;
}

.wrapper {
    display: flex;

    margin-bottom: -12px;
}

.wrapper > * {
    margin-bottom: 12px;
}

.error {
    display: inline-block;
    margin-top: 6px;

    -st-mixin: createFont(null, 'Body-M', '{ "line-height": "1.75em", "size": "12px" }');
    color: rgb(value(errorColor-rgb));
}

/* ------ LAYOUT -------*/
.root:layout(vertical) .wrapper {
    flex-direction: column;
}

.root:layout(vertical):not(:fluid) .wrapper > * {
    max-width: 328px;
}

.root:layout(horizontal) .wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--wix-ui-tpa-checkbox-group-horizontal-spacing, 15px)) -12px;
}

.root:layout(horizontal):not(:fluid) .wrapper {
    max-width: 990px;
}

.root:layout(horizontal) .wrapper > * {
    margin: 0 var(--wix-ui-tpa-checkbox-group-horizontal-spacing, 15px) 12px;
}

.root:layout(horizontal):not(:fluid) .wrapper > * {
    max-width: 300px;
}

/* ----- /LAYOUT  ------ */

/* ------ STATES -------*/
.root:fluid {
    width: 100%;
}
/* ------ /STATES -------*/

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