@st-namespace 'BoxSelection-st-css';
@st-import [ setFont, setColor, setVar ] from '../../common/formatters.st';
@st-import [ errorColor, errorColor-rgb ] from "../../common/palette.st.css";
@st-import [
  --wst-paragraph-2-color-rgb,
  --wst-primary-background-color-rgb,
  --wst-system-disabled-color-rgb,
  --wst-system-error-color-rgb
] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@property st-global(--wut-error-color);

/*
 * The gap between the box selection options
 * @type size
 * @default 12
 * @playground {"max": 290}
 */
@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-29
 */
@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);

.root {
    height: 100%;
    -st-mixin:
        setFont(--wix-ui-tpa-fieldset-main-label-font, --wix-ui-tpa-box-selection-label-font),
        setColor(--wix-ui-tpa-fieldset-main-label-text-color, --wix-ui-tpa-box-selection-label-color),
        setColor(--wix-ui-tpa-fieldset-error-color, --wix-ui-tpa-box-selection-error-color, value(errorColor-rgb)),
        setVar(--wix-ui-tpa-fieldset-min-message-height, --wix-ui-tpa-box-selection-error-message-min-height);
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--wix-ui-tpa-box-selection-item-gap, 12px);
    max-height: 100%;
    max-width: 100%;
}

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

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

.item {
    -st-mixin:
        setColor(--wix-ui-tpa-option-selected-box-color, --wix-ui-tpa-box-selection-selected-box-color, var(--wst-primary-background-color-rgb)),
        setColor(--wix-ui-tpa-option-selected-box-background-color, --wix-ui-tpa-box-selection-selected-box-background-color, var(--wst-primary-background-color-rgb)),
        setColor(--wix-ui-tpa-option-box-fill-color, --wix-ui-tpa-box-selection-box-fill-color),
        setVar(--wix-ui-tpa-option-box-border-radius, --wix-ui-tpa-box-selection-box-border-radius),
        setColor(--wix-ui-tpa-option-hover-border-color, --wix-ui-tpa-box-selection-hover-border-color, var(--wst-paragraph-2-color-rgb)),
        setColor(--wix-ui-tpa-option-hover-box-background-color, --wix-ui-tpa-box-selection-hover-box-background-color),
        setVar(--wix-ui-tpa-option-box-border-width, --wix-ui-tpa-box-selection-box-border-width),
        setColor(--wix-ui-tpa-option-box-border-color, --wix-ui-tpa-box-selection-box-border-color, var(--wst-paragraph-2-color-rgb)),
        setColor(--wix-ui-tpa-option-disabled-color, --wix-ui-tpa-box-selection-disabled-color, var(--wst-system-disabled-color-rgb)),
        setColor(--wix-ui-tpa-option-disabled-background-color, --wix-ui-tpa-box-selection-disabled-background-color),
        setColor(--wix-ui-tpa-option-disabled-border-color, --wix-ui-tpa-box-selection-disabled-border-color, var(--wst-system-disabled-color-rgb)),
        setColor(--wix-ui-tpa-option-error-color, --wix-ui-tpa-box-selection-error-color, var(--wst-system-error-color-rgb)),
        setVar(--wix-ui-tpa-option-box-padding, --wix-ui-tpa-box-selection-box-padding);
}

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

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