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

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

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

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

/*Defaults*/
:vars {
    DefaultSelectedBoxColor: color-8;
    DefaultBoxFillColor: color-1;
    DefaultBorderColor: color-5;
    DefaultBoxBorderWidth: 1px;
    DefaultBoxBorderRadius: 0px;
    DefaultBoxPadding: 16px;
    DefaultXSmallSizeBoxPadding: 0px 8px;
    DefaultSmallSizeBoxPadding: 8px;
    DefaultDisabledColor: color-3;
    DefaultErrorColor: value(defaultErrorColor);
    WhiteColor: #fff;
}

/*Overrides*/
:vars {
    /*
        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;
    /*
        The color representing an error
        @default #DF3131
    */
    ErrorColor: --overridable;
}

/*
 * The BG color of the box
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-option-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-option-box-border-color);

/*
 * The border width of the box (unavailable line as well)
 * @type size
 * @default 1px
 */
@property st-global(--wix-ui-tpa-option-box-border-width);

/*
 * The border radius for each box
 * @type size
 * @default 0px
 */
@property st-global(--wix-ui-tpa-option-box-border-radius);

/*
 * The padding of the box. Predefined by size prop
 * @type size
 * @default 16px
 */
@property st-global(--wix-ui-tpa-option-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-option-selected-box-color);

/*
 * The border color of a hover option.
 * @type color  *
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-option-hover-border-color);

/*
 * The background color of a hover option
 * @type color
 * @default --wix-color-5 with 0.1 opacity
 */
@property st-global(--wix-ui-tpa-option-hover-box-background-color);



/*
 * The background color of a selected option
 * @type color
 * @default --wix-color-8 with 0.1 opacity
 */
@property st-global(--wix-ui-tpa-option-selected-box-background-color);

/*
 * The Disabled color
 * @type color
 * @default --wix-color-3
 */
@property st-global(--wix-ui-tpa-option-disabled-color);

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

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


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

:vars {
    CurrentBoxFillColor: color(fallback(value(BoxFillColor), value(DefaultBoxFillColor)));
    CurrentBorderColor: color(fallback(value(BoxBorderColor), value(DefaultBorderColor)));
    CurrentBoxBorderWidth: fallback(value(BoxBorderWidth), value(DefaultBoxBorderWidth));
    CurrentBoxBorderRadius: fallback(value(BoxBorderRadius), value(DefaultBoxBorderRadius));
    CurrentBoxPadding: fallback(value(BoxPadding), value(DefaultBoxPadding));
    CurrentXSmallSizeBoxPadding: fallback(value(BoxPadding), value(DefaultXSmallSizeBoxPadding));
    CurrentSmallSizeBoxPadding: fallback(value(BoxPadding), value(DefaultSmallSizeBoxPadding));
    CurrentSelectedBoxBorderColor: color(fallback(value(SelectedBoxColor), value(DefaultSelectedBoxColor)));
    CurrentSelectedBoxBackgroundColor: fallback(color(value(SelectedBoxBackgroundColor)), applyOpacity(value(CurrentSelectedBoxBorderColor), 0.1));
    CurrentDisabledColor: color(fallback(value(DisabledColor), value(DefaultDisabledColor)));
    CurrentErrorColor: color(fallback(value(ErrorColor), value(DefaultErrorColor)));
}

.root {
    -st-states: checked, disabled, unavailable, size(enum(xsmall, small, large));
    display: flex;
    flex: 1;
}

.hide {
    display: none;
}

.focused {
    -st-mixin: focusRing();
}

.root:size(xsmall) .wrapper {
    padding: value(DefaultXSmallSizeBoxPadding);
    min-width: 24px;
    min-height: 24px;
}
.root:size(small) .wrapper {
    padding: value(DefaultSmallSizeBoxPadding);
}
.root:size(large) .wrapper {
    padding: value(DefaultBoxPadding);
}

.wrapper {
    margin: -1px;
    align-items: center;
    cursor: pointer;
    display: flex;
    flex: 1;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    border-color: applyOpacity(color(value(DefaultBorderColor)), 0.6);
    border-style: solid;
    border-width: value(DefaultBoxBorderWidth);
    border-radius: value(DefaultBoxBorderRadius);
    background-color: color(value(DefaultBoxFillColor));
}

.root.error .wrapper {
    border-color: color(value(DefaultErrorColor)) !important;
}

.root.overrideStyleParamsOption.error .wrapper {
    border-color: color(value(CurrentErrorColor)) !important;
}

.overrideStyleParamsOption .wrapper {
    border-color: applyOpacity(value(CurrentBorderColor), 0.6);
    border-width: value(CurrentBoxBorderWidth);
    border-radius: value(CurrentBoxBorderRadius);
    background-color: value(CurrentBoxFillColor);
}

.root:size(xsmall).overrideStyleParamsOption .wrapper {
    padding: value(CurrentXSmallSizeBoxPadding);
}
.root:size(small).overrideStyleParamsOption .wrapper {
  padding: value(CurrentSmallSizeBoxPadding);
}
.root:size(large).overrideStyleParamsOption .wrapper {
  padding: value(CurrentBoxPadding);
}

/* CHECKED */
.root:checked {
    background-color: color(value(DefaultBoxFillColor));
    border-radius: value(DefaultBoxBorderRadius);
}
.root:checked.overrideStyleParamsOption {
    background-color: value(CurrentBoxFillColor);
    border-radius: value(CurrentBoxBorderRadius);
}

.root:checked .wrapper {
    background-color: applyOpacity(color(value(DefaultSelectedBoxColor)), 0.1);
    border-color: color(value(DefaultSelectedBoxColor));
}

.root:checked.overrideStyleParamsOption .wrapper {
    background-color: value(CurrentSelectedBoxBackgroundColor);
    border-color: color(value(CurrentSelectedBoxBorderColor));
}

/* DISABLED */
.root:disabled {
    border-radius: value(DefaultBoxBorderRadius);
    background-color: applyOpacity(color(value(WhiteColor)), 0.3);
}

.root:disabled.overrideStyleParamsOption {
    border-radius: value(CurrentBoxBorderRadius);
    background-color: applyOpacity(color(value(WhiteColor)), 0.3);
}

.root:disabled:not(:checked) .wrapper {
    filter: none;
    opacity: 1;
    cursor: default;
    pointer-events: none;
    background-color: color(value(DefaultBoxFillColor));
    border-color: color(value(DefaultDisabledColor));
    color: color(value(DefaultDisabledColor));
}
.root:disabled:not(:checked).overrideStyleParamsOption .wrapper {
    background-color: color(value(CurrentBoxFillColor));
    border-color: color(value(CurrentDisabledColor));
    color: color(value(CurrentDisabledColor));
}

/* CHECKED + DISABLED */
.root:disabled:checked {
    background-color: color(value(DefaultBoxFillColor));
    border-color: color(value(DefaultDisabledColor));
    color: color(value(DefaultDisabledColor));
}
.root:disabled:checked.overrideStyleParamsOption {
    background-color: color(value(CurrentBoxFillColor));
    color: color(value(CurrentDisabledColor));
}
.root:disabled:checked .wrapper {
    filter: none;
    opacity: 1;
    cursor: default;
    background-color: applyOpacity(color(value(WhiteColor)), 0.3);
    border-color: color(value(DefaultDisabledColor));
}
.root:disabled:checked.overrideStyleParamsOption .wrapper {
    border-color: color(value(CurrentDisabledColor));
    background-color: applyOpacity(color(value(WhiteColor)), 0.3);
}

/* ERROR + CHECKED + DISABLED + UNAVAILABLE */

.root:checked.error .wrapper {
    border-color: color(value(DefaultErrorColor)) !important;
}

.root:disabled.error .wrapper,
.root:unavailable.error .wrapper {
    background-color: color(value(DefaultBoxFillColor));
    border-color: color(value(DefaultErrorColor)) !important;
}

.root:checked.error.overrideStyleParamsOption .wrapper,
.root:disabled.error.overrideStyleParamsOption .wrapper,
.root:unavailable.error.overrideStyleParamsOption .wrapper {
    background-color: color(value(CurrentBoxFillColor));
    border-color: color(value(CurrentErrorColor)) !important;
}

/* HOVER + FOCUS */
.root:not(:disabled):not(:checked):not(:unavailable):hover .wrapper,
.root:not(:disabled):not(:checked):not(:unavailable):focus-within .wrapper {
    border-color: applyOpacity(color(value(DefaultBorderColor)), 1);
}

.root:not(:disabled):not(:checked):not(:unavailable):hover.error .wrapper,
.root:not(:disabled):not(:checked):not(:unavailable):focus-within.error .wrapper {
    border-color: applyOpacity(color(value(DefaultErrorColor)), 1) !important;
}

.root:not(:disabled):not(:checked):not(:unavailable):hover.overrideStyleParamsOption .wrapper,
.root:not(:disabled):not(:checked):not(:unavailable):focus-within.overrideStyleParamsOption .wrapper {
    border-color: applyOpacity(value(CurrentBorderColor), 1);
}

.root:not(:disabled):not(:checked):not(:unavailable):hover.error.overrideStyleParamsOption .wrapper,
.root:not(:disabled):not(:checked):not(:unavailable):focus-within.error.overrideStyleParamsOption .wrapper {
    border-color: applyOpacity(color(value(CurrentErrorColor)), 1) !important;
}

/* UNAVAILABLE */
.root:unavailable {
    pointer-events: none;
    cursor: default;
    position: relative;
    border-radius: value(DefaultBoxBorderRadius);
    background-color: applyOpacity(color(value(WhiteColor)), 0.3);
}

.root:unavailable.overrideStyleParamsOption {
    border-radius: value(CurrentBoxBorderRadius);
    background-color: applyOpacity(color(value(WhiteColor)), 0.3);
}

.root:unavailable .unavailableDiagonalLine {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: value(DefaultBoxBorderRadius);
}
.root:unavailable.overrideStyleParamsOption .unavailableDiagonalLine {
    border-radius: value(CurrentBoxBorderRadius);
}
.root:unavailable .unavailableDiagonalLine line {
    stroke: color(value(DefaultDisabledColor));
    stroke-width: value(DefaultBoxBorderWidth);
}
.root:unavailable.overrideStyleParamsOption .unavailableDiagonalLine line {
    stroke: color(value(CurrentDisabledColor));
    stroke-width: value(CurrentBoxBorderWidth);
}
.root:unavailable .wrapper {
    pointer-events: none;
    cursor: default;
    border-color: color(value(DefaultDisabledColor));
    color: color(value(DefaultDisabledColor));
    background-color: color(value(DefaultBoxFillColor));
}
.root:unavailable.overrideStyleParamsOption .wrapper {
    background-color: color(value(CurrentBoxFillColor));
    border-color: color(value(CurrentDisabledColor));
    color: color(value(CurrentDisabledColor));
}

.root.vertical {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

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