@st-namespace 'BoxSelection-deprecated-st-css';
@property st-global(--wut-error-color);

:import {
    -st-from: "../../common/formatters.st";
    -st-named: color, font, fallback, applyUnit, unit;
}

:import {
    -st-from: "./Option.deprecated.st.css";
    -st-named: overrideStyleParamsOption;
}

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

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

/* Defaults - default params */
:vars {
    defaultItemGap: 12;
    DefaultErrorColor: value(defaultErrorColor);
}

/* Overrides - deceleration of overridable parameters by the consumer */
:vars {
    /*
    The gap between the box selection options
    @default 12
    */
    ItemGap: --overridable;
    /*
       The BG color of the box
       @default color-1
   */
    BoxFillColor: --overridable;
    /*
        The border color of the box (unavailable line as well)
        @default color-5
    */
    BoxBorderColor: --overridable;
    /*
        The border width of the box (unavailable line as well)
        @default 1px
    */
    BoxBorderWidth: --overridable;
    /*
        The border radius for each box
        @default 0px
    */
    BoxBorderRadius: --overridable;
    /*
       The padding of the box. Predefined by size prop
       @default 16px
   */
    BoxPadding: --overridable;
    /*
        The border color of a selected option. If you do not override the SelectedBoxBackgroundColor, the selected background color would be the border color with 0.1 opacity.
        @default color-8
    */
    SelectedBoxColor: --overridable;
    /*
      The background color of a selected option
      @default color-8 with 0.1 opacity
    */
    SelectedBoxBackgroundColor: --overridable;
    /*
        The Disabled color
        @default color-3
    */
    DisabledColor: --overridable;
    /*
        Label's font
        @default {theme: 'Body-M', size: '14px', lineHeight: '1.4'}
    */
    LabelFont: --overridable;
    /*
        Label's font 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 gap between the box selection options
 * @type size
 * @default 12
 */
@property st-global(--wix-ui-tpa-box-selection-item-gap);
/*
 * The BG color of the box
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-box-selection-box-fill-color);
/*
 * The border color of the box (unavailable line as well)
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-box-selection-box-border-color);
/*
 * The border width of the box (unavailable line as well)
 * @type size
 * @default 1px
 */
@property st-global(--wix-ui-tpa-box-selection-box-border-width);
/*
 * The border radius for each box
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-box-selection-box-border-radius);
/*
 * The padding of the box. Predefined by size prop
 * @type size
 * @default 16px
 */
@property st-global(--wix-ui-tpa-box-selection-box-padding);
/*
 * The border color of a selected option. If you do not override the SelectedBoxBackgroundColor, the selected background color would be the border color with 0.1 opacity.
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-box-selection-selected-box-color);
/*
 * The background color of a selected option
 * @type color
 * @default --wix-color-8 with 0.1 opacity
 */
@property st-global(--wix-ui-tpa-box-selection-selected-box-background-color);
/*
 * The Disabled color
 * @type color
 * @default --wix-color-3
 */
@property st-global(--wix-ui-tpa-box-selection-disabled-color);

/*
 * The background color of a disabled option
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-box-selection-disabled-background-color);

/*
 * The border color of a disabled option
 * @type color
 * @default --wix-color-29
 */
@property st-global(--wix-ui-tpa-box-selection-disabled-border-color);

/*
 * Label's font
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-box-selection-label-font);
/*
 * Label's font color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-box-selection-label-color);
/*
 * The color representing an error
 * @type color
 * @default #DF3131
 */
@property st-global(--wix-ui-tpa-box-selection-error-color);
/*
 * A minimum height for the error message element
 * @type size
 */
@property st-global(--wix-ui-tpa-box-selection-error-message-min-height);

/* Overrides */
:vars {
    boxSelectionGap: applyUnit(fallback(value(ItemGap), value(defaultItemGap)), px);
    CurrentErrorColor: color(fallback(value(ErrorColor), value(DefaultErrorColor)));
}

.root {
    height: 100%;
}

.root.overrideStyleParams {
    -st-mixin: Fieldset(
        MainLabelFont font(value(LabelFont)),
        MainLabelTextColor color(value(LabelColor)),
        ErrorColor value(CurrentErrorColor),
        MinMessageHeight unit(value(ErrorMessageMinHeight), px)
    );
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: applyUnit(value(defaultItemGap), px);
    max-height: 100%;
    max-width: 100%;
}

.container.vertical {
    flex-direction: column;
    flex-wrap: wrap;
}

.container.inline {
    display: inline-flex;
}

.overrideStyleParams {
    gap: value(boxSelectionGap);
}

.overrideStyleParams .item {
    -st-mixin: overrideStyleParamsOption(
            SelectedBoxColor value(SelectedBoxColor),
            SelectedBoxBackgroundColor value(SelectedBoxBackgroundColor),
            BoxFillColor value(BoxFillColor),
            BoxBorderRadius value(BoxBorderRadius),
            BoxBorderWidth value(BoxBorderWidth),
            BoxBorderColor value(BoxBorderColor),
            DisabledColor value(DisabledColor),
            ErrorColor value(ErrorColor),
            BoxPadding value(BoxPadding),
    );
}

.suffix {
  display: flex;
  flex-grow: 1;
  align-self: center;
}

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