@st-namespace 'ColorPicker-st-css';
@st-import [ --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ --wst-paragraph-2-color-rgb, --wst-system-error-color-rgb ] from "@wix/wix-site-theme-variables/stylable-variables.st.css";
@st-import ColorPickerBase from "./ColorPicker.base.st.css";
@st-import [ setColor, setVar, createColor, createFont, createFontWithOverrides ] from "../../common/formatters.st";
@st-import [ focusRing, errorColor-rgb ] from "../../common/palette.st.css";

@property st-global(--wut-error-color);

/*
 * The size (width and height) of a single ColorPickerItem
 * @type size
 * @default 24
 */
@property st-global(--wix-ui-tpa-color-picker-item-size);

/*
 * The border radius of ColorPickerItem
 * @type size
 * @default 12
 */
@property st-global(--wix-ui-tpa-color-picker-border-radius);

/*
 * The selection border color of ColorPickerItem
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-color-picker-selection-border-color);

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

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

/*
 * The font of the label
 * @type font
 * @default preset: 'Body-M' | overrides: { size: '14px', lineHeight: '1.4'}
 */
@property st-global(--wix-ui-tpa-color-picker-main-label-font);

/*
 * The color of the label. 60% opacity when disabled
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-color-picker-main-label-text-color);

.root {
    -st-extends: ColorPickerBase;
}

.root::item::radioOuter {
    width: var(--wix-ui-tpa-color-picker-item-size, 24px);
    height: var(--wix-ui-tpa-color-picker-item-size, 24px);
    border-radius: var(--wix-ui-tpa-color-picker-border-radius, 12px);
    transition: box-shadow 0.1s linear;
}

.root::item:focusedByKeyboard::radioOuter {
    -st-mixin: focusRing();
}

.root::item:checked::radioOuter,
.root::item:focused::radioOuter {
    box-shadow: 0 0 0 1px createColor(--wix-ui-tpa-color-picker-selection-border-color, (var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), 0.6));
}

.root:error::item::radioInner {
    --wix-ui-tpa-color-picker-error-border-color: rgb(var(--wst-system-error-color-rgb));
    border-color: var(--wix-ui-tpa-color-picker-error-border-color, var(--wut-error-color, rgb(value(errorColor-rgb)))) !important;
}

.root:error::item::imageInner {
    -st-mixin:
        setColor(--wix-ui-tpa-image-border-color, --wix-ui-tpa-color-picker-selection-border-color),
        setColor(--wix-ui-tpa-image-background-color, --wix-ui-tpa-color-picker-selection-border-color),
        setVar(--wix-ui-tpa-image-border-width, null, px, 1);
}

.root:error {
    -st-mixin:
        setColor(--wix-ui-tpa-error-message-wrapper-error-color, --wix-ui-tpa-color-picker-error-color),
        setVar(--wix-ui-tpa-error-message-wrapper-min-message-height, --wix-ui-tpa-color-picker-error-message-min-height);
}

.root:error::item::radioOuter {
    margin-bottom: 0;
}

.root:error::container {
    vertical-align: bottom;
}

.root::label {
    -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "1.4", "size": "14px" }'),
    createFont((--wix-ui-tpa-color-picker-main-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
    color: createColor(--wix-ui-tpa-color-picker-main-label-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
}

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