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

:import {
    -st-from: './ColorPicker.base.st.css';
    -st-default: ColorPickerBase;
}

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

:import {
    -st-from: "../../common/palette.st.css";
    -st-named: focusRing;
}

:vars {
    /*Defaults*/
    DefaultItemSize: 24;
    DefaultBorderRadius: 12;
    DefaultFocusColor: applyOpacity(color(color-5), 0.6);
    DefaultLabelFont: "{theme: 'Body-M', size: '14px', lineHeight: '1.4'}";
    DefaultLabelTextColor: color-5;
}

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

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

/*Overrides*/
:vars {
    /*
        The size (width and height) of a single ColorPickerItem
        @default 24
     */
    ItemSize: --overridable;
    /*
        The border radius of ColorPickerItem
        @default 12
     */
    BorderRadius: --overridable;
    /*
        The selection border color of ColorPickerItem
        @default color-5
     */
    SelectionBorderColor: --overridable;
    /*
        The color representing an error
        @default #DF3131
    */
    ErrorColor: --overridable;
    /*
        A minimum height for the error message element
    */
    ErrorMessageMinHeight: --overridable;
    /*
      The font of the label
      @default {theme: 'Body-M', size: '14px', lineHeight: '1.4'}
    */
    MainLabelFont: --overridable;
    /*
      The color of the label. 60% opacity when disabled
      @default color-5
    */
    MainLabelTextColor: --overridable;
}

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

:vars {
    colorPickerItemSize: applyUnit(fallback(value(ItemSize), value(DefaultItemSize)), px);
    colorPickerBorderRadius: fallback(zeroAsTrue(value(BorderRadius)), applyUnit(value(DefaultBorderRadius), px));
    focusColor: color(fallback(value(SelectionBorderColor), value(DefaultFocusColor)));
    errorColor: color(fallback(value(ErrorColor), value(DefaultErrorColor)));
    mainLabelTextColor: color(fallback(value(MainLabelTextColor), value(DefaultLabelTextColor)));
    mainLabelFont: fallback(font(value(MainLabelFont)), font(value(DefaultLabelFont)));
}

.root {
    -st-extends: ColorPickerBase;
}

.root::item::radioOuter {
    width: value(colorPickerItemSize);
    height: value(colorPickerItemSize);
    border-radius: value(colorPickerBorderRadius);
    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 color(value(focusColor));
}

.root:error::item::radioInner {
  border-color: var(--wut-error-color, value(DefaultErrorColor)) !important;
}

.root:error {
    -st-mixin: ErrorMessageWrapper(
        ErrorColor value(errorColor),
        MinMessageHeight unit(value(ErrorMessageMinHeight), px)
    );
}

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

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

.root::label {
    font: value(mainLabelFont);
    color: value(mainLabelTextColor);
}

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