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

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

:import {
    -st-from: "../Checkbox/Checkbox.deprecated.st.css";
    -st-default: TPACheckbox;
}

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

/*Defaults*/
:vars {
    DefaultErrorColor: value(paletteErrorColor);
    Font: font("{theme: 'Body-M', size: '14px', lineHeight: '1.5em'}");
    FontError: font("{theme: 'Body-M', size: '12px', lineHeight: '1.75em'}");
}

/*Overrides*/
:vars {
    /*
       The label text color
       @default color-5
   */
    LabelColor: --overridable;
    /*
        The color representing an error
        @default #DF3131
    */
    ErrorColor: --overridable;
    /*
        A minimum height for the error message element
    */
    ErrorMessageMinHeight: --overridable;
}

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

:vars {
    CurrentErrorColor: color(fallback(value(ErrorColor), value(DefaultErrorColor)));
}

.root {
    -st-states: disabled, layout( enum(horizontal, vertical) ), error, fluid, newErrorMessage;
    -st-mixin: Fieldset(
        MainLabelTextColor value(LabelColor),
        ErrorColor value(CurrentErrorColor),
        MinMessageHeight value(ErrorMessageMinHeight)
    );

    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;

    font: value(FontError);
    color: color(value(paletteErrorColor));
}

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

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

.root:layout(horizontal) .wrapper > * {
    margin: 0 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.deprecated.st.css" */