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

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

:import {
  -st-from: "../internal/WixUiCoreComponents/components/CoreCheckbox/CoreCheckbox.st.css";
  -st-default: Checkbox;
}

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

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

/*Defaults*/
:vars {
  DefaultTextColor: color-5;
  DefaultBorderColor: color-5;
  DefaultIconColor: color-8;
  DefaultErrorColor: value(paletteErrorColor);
  DefaultBoxBorderColor: color-5;
  DefaultBoxBorderRadius: 0;
  DefaultBoxColor: color-1;
  DisabledColor: color-3;
  DefaultLabelFont: font("{theme: 'Body-M', size: '16px', lineHeight: '24px'}");
  DefaultDisabledLabelColor: color-3;
  DefaultInputMainBorderOpacity: 0.6;
  DefaultInputHoverBackgroundColor: transparent;
  DefaultInputHoverBackgroundOpacity: 1;
  DefaultInputBorderWidth: 1;
  DefaultInputBorderRadius: 0;
  DefaultInputHoverBorderWidth: 1;
  DefaultInputHoverBorderRadius: 0;
}

/*Overrides*/
:vars {
  /*
      The checkbox text color
      @default color-5
  */
  TextColor: --overridable;
  /*
      The checkbox border color. FYI, An opacity of  0.6 will be added.
      @default color-5
  */
  BorderColor: --overridable;
  /*
      The color of the icon
      @default color-8
  */
  IconColor: --overridable;
  /*
      The box border color. FYI, This value won't be affected on disabled mode.
      @default color-5
  */
  BoxBorderColor: --overridable;
  /*
      The corner radius of the box
      @default Default size: 0px
  */
  BoxBorderRadius: --overridable;
  /*
      The box background color. FYI, This value won't be affected on disabled mode.
      @default color-1
  */
  BoxColor: --overridable;
  /*
      The font of the label
      @default {theme: 'Body-M', size: '16px', lineHeight: '24px'}
  */
  LabelFont: --overridable;
  /*
      The color of the label when the checkbox is disabled
      @default color-3
  */
  DisabledLabelColor: --overridable;
  /*
      The color representing an error
      @default #DF3131
  */
  ErrorColor: --overridable;
  /*
      A minimum height for the error message element
  */
  ErrorMessageMinHeight: --overridable;
  /*
    Border opacity
    @default 0.6
  */
  MainBorderOpacity: --overridable;
  /*
    Border color
    @default color-5
  */
  InputHoverBorderColor: --overridable;
  /*
    Hover background color
    @default color-1
  */
  InputHoverBackgroundColor: --overridable;
  /*
    Hover background color
    @default 1
  */
  InputHoverBackgroundOpacity: --overridable;
  /*
    Hover text color
    @default color-5
  */
  HoverTextColor: --overridable;
  /*
    Input border width
    @default 1px
  */
  InputBorderWidth: --overridable;
  /*
    Input border radius
    @default 0
  */
  InputBorderRadius: --overridable;
  /*
    Input hover border width
    @default 1px
  */
  InputHoverBorderWidth: --overridable;
  /*
    Input hover border radius
    @default 0
  */
  InputHoverBorderRadius: --overridable;
}

/*
 * The checkbox text color
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-checkbox-text-color);

/*
 * The checkbox border color. FYI, An opacity of  0.6 will be added.
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-checkbox-border-color);

/*
 * The color of the icon
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-checkbox-icon-color);

/*
 * The box border color. FYI, This value won't be affected on disabled mode.
 * @type color
 * @default --wix-color-5
 */
@property st-global(--wix-ui-tpa-checkbox-box-border-color);

/*
 * The corner radius of the box
 * @type size
 * @default Default size: 0px
 */
@property st-global(--wix-ui-tpa-checkbox-box-border-radius);

/*
 * The box background color. FYI, This value won't be affected on disabled mode.
 * @type color
 * @default --wix-color-1
 */
@property st-global(--wix-ui-tpa-checkbox-box-color);

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

/*
 * The color of the label when the checkbox is disabled
 * @type color
 * @default --wix-color-3
 */
@property st-global(--wix-ui-tpa-checkbox-disabled-label-color);

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

/*
 * A minimum height for the error message element
 * @type size
 */
@property st-global(--wix-ui-tpa-checkbox-error-message-min-height);
/*
 * Border opacity
 * @default 0.6
 */
@property st-global(--wix-ui-tpa-checkbox-input-main-border-opacity);
/*
 * Hover border color
 * @type color
 * @default color-5
 */
@property st-global(--wix-ui-tpa-checkbox-input-hover-border-color);
/*
 * Hover background color
 * @type color
 * @default color-1
 */
@property st-global(--wix-ui-tpa-checkbox-input-hover-background-color);
/*
 * Hover background opacity
 * @default 1
 */
@property st-global(--wix-ui-tpa-checkbox-input-hover-background-opacity);
/*
 * Hover text color
 * @type color
 * @default color-5
 */
@property st-global(--wix-ui-tpa-checkbox-hover-text-color);
/*
* Input border width
* @default 1px
*/
@property st-global(--wix-ui-tpa-checkbox-input-border-width);
/*
* Input border radius
* @default 0
*/
@property st-global(--wix-ui-tpa-checkbox-input-border-radius);
/*
* Input hover border width
* @default 1px
*/
@property st-global(--wix-ui-tpa-checkbox-input-hover-border-width);
/*
* Input hover border radius
* @default 0
*/
@property st-global(--wix-ui-tpa-checkbox-input-hover-border-radius);

:vars {
  CurrentBorderColor: color(fallback(value(BorderColor), value(DefaultBorderColor)));
  CurrentBoxBorderColor: color(fallback(value(BoxBorderColor), value(DefaultBoxBorderColor)));
  CurrentBoxBorderRadius: fallback(value(BoxBorderRadius), value(DefaultBoxBorderRadius));
  CurrentIconColor: color(fallback(value(IconColor), value(DefaultIconColor)));
  CurrentTextColor: color(fallback(value(TextColor), value(DefaultTextColor)));
  CurrentBoxColor: color(fallback(value(BoxColor), value(DefaultBoxColor)));
  CurrentLabelFont: fallback(font(value(LabelFont)), font(value(DefaultLabelFont)));
  CurrentDisabledLabelColor: color(fallback(value(DisabledLabelColor), value(DefaultDisabledLabelColor)));
  CurrentErrorColor: color(fallback(value(ErrorColor), value(DefaultErrorColor)));
  CurrentMainBorderOpacity: fallback(value(MainBorderOpacity), value(DefaultInputMainBorderOpacity));
  CurrentInputHoverBorderColor: color(fallback(value(InputHoverBorderColor), value(CurrentBorderColor)));
  CurrentInputHoverBackgroundColor: color(fallback(value(InputHoverBackgroundColor), value(DefaultInputHoverBackgroundColor)));
  CurrentInputHoverBackgroundOpacity: fallback(value(InputHoverBackgroundOpacity), value(DefaultInputHoverBackgroundOpacity));
  CurrentHoverTextColor: color(fallback(value(HoverTextColor), value(CurrentTextColor)));
  CurrentInputBorderWidth: fallback(value(InputBorderWidth), value(DefaultInputBorderWidth));
  CurrentInputBorderRadius: fallback(value(InputBorderRadius), value(DefaultInputBorderRadius));
  CurrentInputHoverBorderWidth: fallback(value(InputHoverBorderWidth), value(DefaultInputHoverBorderWidth));
  CurrentInputHoverBorderRadius: fallback(value(InputHoverBorderRadius), value(DefaultInputHoverBorderRadius));
}

.root {
  -st-states: box, checked, disabled, error, newErrorMessage;

  display: inline-flex;
  box-sizing: border-box;

  transition: background-color 0.2s linear, border-color 0.2s linear, border-width 0.2s linear, border-radius 0.2s linear;
}

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

.root * {
  box-sizing: inherit;
}

.root:box:not(:newErrorMessage), .root:box:newErrorMessage .container {
  display: flex;
  background-color: color(value(CurrentBoxColor));
  border: 1px solid applyOpacity(value(CurrentBoxBorderColor), value(CurrentMainBorderOpacity));
  border-radius: unit(value(CurrentBoxBorderRadius), px);
  box-sizing: border-box;
  position: relative;
  padding: 0 16px;
}

.core {
  -st-extends: Checkbox;
  width: 100%;
  display: flex;
  align-items: center;
}

.core::childContainer {
  display: flex;
  flex: 1;
  align-items: center;
}

.core::box {
  line-height: 0;
  display: flex;
}

.core::box::after {
  content: '';
  width: 12px;
}

.root:box .core::childContainer {
  padding: 15px 0;
}

.icon {
  box-sizing: content-box;
  display: inline-block;
  width: 14px;
  height: 14px;

  border: unit(value(CurrentInputBorderWidth), px) solid;
  border-color: applyOpacity(value(CurrentBorderColor), value(CurrentMainBorderOpacity));
  border-radius: unit(value(CurrentInputBorderRadius), px);

  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.2;
  vertical-align: middle;
  transition: border-color 0.2s linear, border-width 0.2s linear, border-radius 0.2s linear;
}

.icon {
  position: relative;
}

.icon svg[fill="currentColor"] {
  position: absolute;
  top: -1px;
  left: -1px;
}

.icon path {
  fill: value(CurrentIconColor);
}

.label {
  font: value(CurrentLabelFont);
  display: inline-block;
  color: value(CurrentTextColor);
  transition: color 0.2s linear;
}

.root:hover .label, .root:focus-within .label {
  color: value(CurrentHoverTextColor);
}

.iconToolTip {
  margin-inline-start: 9px;
  line-height: 0;
}

.errorIcon {
  color: value(paletteErrorColor) !important;
}

.label.suffixed {
  flex: 1;
  display: flex;
}

.label.suffixed::after {
  content: '';
  width: 5px;
  flex: 1 0 5px;
}

.suffix {
  flex: 0;
}

/* STATES */
.root:hover:box, .root:focus-within:box {
  border-color: applyOpacity(value(CurrentBoxBorderColor), 1);
}

.root:box:checked {
  background-color: applyOpacity(value(CurrentIconColor), 0.1);
  border: 1px solid color(value(CurrentIconColor));
}

.root:box.disabled, .root:box:disabled {
  border-color: color(value(DisabledColor));
  background-color: color(value(DefaultBoxColor))
}

.root:box.disabled:hover:not(:checked), .root:box:disabled:focus-within:not(:checked) {
  border-color: applyOpacity(value(CurrentBoxBorderColor), 0.6);
}

.root:box.disabled:checked, .root:box:disabled:checked {
  border-color: color(value(DisabledColor));
  background-color: applyOpacity(color(value(DisabledColor)), 0.1);
}

.root:box:checked::after {
  opacity: 1;
}

.root:hover .icon, .root:focus-within .icon {
  border-color: applyOpacity(value(CurrentInputHoverBorderColor), 1);
  background-color: applyOpacity(value(CurrentInputHoverBackgroundColor), value(CurrentInputHoverBackgroundOpacity));
  border-width: unit(value(CurrentInputHoverBorderWidth), px);
  border-radius: unit(value(CurrentInputHoverBorderRadius), px);
}

.root:box .iconToolTip {
  display: flex;
  flex: 1;
  justify-content: flex-end;
}

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

.root:box:error:newErrorMessage:not(:checked) .container {
  border-color: var(--wut-error-color, value(DefaultErrorColor))  !important;
}

.root:newErrorMessage {
  display: block;
  flex: 1;
  justify-content: flex-end;
}

.root:error:not(:checked) .icon {
  border-color: var(--wut-error-color, value(DefaultErrorColor)) !important;
}

.root:error:not(:checked):hover .icon, .root:error:not(:checked):focus-within .icon {
  border-color: applyOpacity(value(CurrentErrorColor), 0.7) !important;
}

.root:disabled {
  cursor: default;
  pointer-events: none;
}

.root:disabled .icon {
  border-color: color(value(DisabledColor));
}

.root:disabled .label {
  color: value(CurrentDisabledLabelColor);
}

.root:disabled .icon path {
  fill: color(value(DisabledColor));
}

:global(#SITE_CONTAINER.focus-ring-active) .focused {
  -st-mixin: focusRing();
}

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