@st-namespace 'Option-st-css';
@st-import [ --wix-color-1, --wix-color-8, --wix-color-29, --wix-color-5 ] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [ createColor ] from "../../common/formatters.st";
@st-import [ focusRing, errorColor-rgb ] from "../../common/palette.st.css";

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

/*
 * 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 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 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 Disabled color
 * @type color
 * @default --wix-color-29
 */
@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);

/*
 * The color representing a selected label
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-option-selected-color);

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

.hide {
    display: none;
}

.focused {
    border-radius: var(--wix-ui-tpa-option-box-border-radius, 0px);
}

:global(#SITE_CONTAINER.focus-ring-active) .focused {
    -st-mixin: focusRing();
}
.root:size(xsmall) .wrapper {
    padding: var(--wix-ui-tpa-option-box-padding, 0px 8px);
    min-width: 24px;
    min-height: 24px;
}

.root:size(small) .wrapper {
    padding: var(--wix-ui-tpa-option-box-padding, 8px);
}

.root:size(large) .wrapper {
    padding: var(--wix-ui-tpa-option-box-padding, 16px);
}

.wrapper {
    margin: -1px;
    align-items: center;
    cursor: pointer;
    display: flex;
    flex: 1;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
    border-color: createColor(--wix-ui-tpa-option-box-border-color, var(--wix-color-5), 0.6);
    border-style: solid;
    border-width: var(--wix-ui-tpa-option-box-border-width, 1px);
    border-radius: var(--wix-ui-tpa-option-box-border-radius, 0px);
    background-color: createColor(--wix-ui-tpa-option-box-fill-color, var(--wix-color-1));
}

.root.error .wrapper {
    border-color: createColor(--wix-ui-tpa-option-error-color, value(errorColor-rgb)) !important;
}

/* CHECKED */
.root:checked {
    background-color: createColor(--wix-ui-tpa-option-box-fill-color, var(--wix-color-1));
    border-radius: var(--wix-ui-tpa-option-box-border-radius, 0px);
}

.root:checked .wrapper {
    background-color: createColor(--wix-ui-tpa-option-selected-box-background-color, var(--wix-color-8));
    border-color: createColor(--wix-ui-tpa-option-selected-box-color, var(--wix-color-8));
    color: createColor(--wix-ui-tpa-option-selected-color, var(--wix-color-1));
}


/* DISABLED */
.root:disabled {
    border-radius: var(--wix-ui-tpa-option-box-border-radius, 0px);
    border-color: createColor((--wix-ui-tpa-option-disabled-border-color, --wix-ui-tpa-option-disabled-color), var(--wix-color-29));
    background-color: createColor((--wix-ui-tpa-option-disabled-background-color, --wix-ui-tpa-option-box-fill-color), rgba(255, 255, 255, 0.3));
}

.root:disabled:not(:checked) .wrapper {
    filter: none;
    opacity: 1;
    cursor: default;
    pointer-events: none;
    background-color: createColor((--wix-ui-tpa-option-disabled-background-color, --wix-ui-tpa-option-box-fill-color), var(--wix-color-1));
    border-color: createColor((--wix-ui-tpa-option-disabled-border-color , --wix-ui-tpa-option-disabled-color), var(--wix-color-29));
    color: createColor(--wix-ui-tpa-option-disabled-color, var(--wix-color-29));
}

/* CHECKED + DISABLED */
.root:disabled:checked {
    background-color: createColor((--wix-ui-tpa-option-disabled-background-color, --wix-ui-tpa-option-box-fill-color), var(--wix-color-1));
    border-color: createColor((--wix-ui-tpa-option-disabled-border-color, --wix-ui-tpa-option-disabled-color), rgb(var(--wix-color-29)));
    color: createColor(--wix-ui-tpa-option-disabled-color, var(--wix-color-29));
}
.root:disabled:checked .wrapper {
    filter: none;
    opacity: 1;
    cursor: default;
    background-color: rgba(255, 255, 255, 0.3);
    border-color: createColor((--wix-ui-tpa-option-disabled-border-color, --wix-ui-tpa-option-disabled-color), var(--wix-color-29));
}

/* ERROR + CHECKED + DISABLED + UNAVAILABLE */

.root:checked.error .wrapper {
    border-color: createColor(--wix-ui-tpa-option-error-color, value(errorColor-rgb)) !important;
    background-color: createColor((--wix-ui-tpa-option-box-fill-color-rgb, --wix-ui-tpa-option-selected-box-background-color-rgb), (var(--wix-color-8), 0.1));
}

.root:disabled.error .wrapper,
.root:unavailable.error .wrapper {
    background-color: createColor(--wix-ui-tpa-option-box-fill-color, var(--wix-color-1));
    border-color: createColor(--wix-ui-tpa-option-error-color, value(errorColor-rgb)) !important;
}

/* HOVER + FOCUS */
.root:not(:disabled):not(:checked):not(:unavailable):hover .wrapper,
.root:not(:disabled):not(:checked):not(:unavailable):focus-within .wrapper {
    border-color: createColor((--wix-ui-tpa-option-hover-border-color, --wix-ui-tpa-option-box-border-color), var(--wix-color-5));
}


.root:not(:disabled):not(:checked):not(:unavailable):hover.error .wrapper,
.root:not(:disabled):not(:checked):not(:unavailable):focus-within.error .wrapper {
    border-color: createColor(--wix-ui-tpa-option-error-color, value(errorColor-rgb)) !important;
}

.root:not(:disabled):not(:checked):not(:unavailable):hover .wrapper {
    border-color: createColor(--wix-ui-tpa-option-hover-border-color, var(--wix-color-5));
    background-color: createColor(--wix-ui-tpa-option-hover-box-background-color, var(--wix-color-1));
}

/* UNAVAILABLE */
.root:unavailable {
    pointer-events: none;
    cursor: default;
    position: relative;
    border-radius: var(--wix-ui-tpa-option-box-border-radius, 0px);
    background-color: rgba(255, 255, 255, 0.3);
}

.root:unavailable .unavailableDiagonalLine {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: var(--wix-ui-tpa-option-box-border-radius, 0px);
}
.root:unavailable .unavailableDiagonalLine line {
    stroke: createColor(--wix-ui-tpa-option-disabled-color, var(--wix-color-29));
    stroke-width: var(--wix-ui-tpa-option-box-border-width, 1px);
}
.root:unavailable .wrapper {
    pointer-events: none;
    cursor: default;
    border-color: createColor((--wix-ui-tpa-option-disabled-border-color, --wix-ui-tpa-option-disabled-color), var(--wix-color-29));
    color: createColor(--wix-ui-tpa-option-disabled-color, var(--wix-color-29));
    background-color: createColor(--wix-ui-tpa-option-box-fill-color, var(--wix-color-1));
}

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

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