@st-namespace 'RadioButtonGroup-st-css';
@st-import [ errorColor, errorColor-rgb ] from '../../common/palette.st.css';
@st-import [ createFont, setColor, setVar, setFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import [ --wst-paragraph-2-color-rgb ] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
/*
 * The label text color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-radio-button-group-label-color);

/*
 * The label text font
 * @type font
 * @default Body-M
 */
@property st-global(--wix-ui-tpa-radio-button-group-label-font);

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

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

/*
 * The spacing between radio button elements in horizontal layout
 * @type size
 * @default 30px
 */
@property st-global(--wix-ui-tpa-radio-button-group-column-gap);

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

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


.wrapper {
    display: flex;
    margin-bottom: -12px;
}

.root:withSpacing .wrapper > *, .root:withSpacing:newErrorMessage .wrapper > * {
    margin-bottom: 12px;
}

.root:newErrorMessage:not(:withSpacing):not(:layout(horizontal)) .wrapper {
    margin-bottom: 0;
}

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

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

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

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

.root:layout(horizontal) .wrapper {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: -12px;
    margin-bottom: -12px;
    column-gap: var(--wix-ui-tpa-radio-button-group-column-gap, 30px);
}

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

.root:layout(horizontal) .wrapper > *,
.root:layout(horizontal):newErrorMessage .wrapper > * {
    margin-top: 12px;
    margin-bottom: 12px;
}

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

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

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

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