@st-namespace 'Checkbox-st-css';
@st-import [
  --wix-color-1,
  --wix-color-8,
  --wix-color-5,
  --wix-color-4,
  --wix-color-29
] from '@wix/tpa-style-webpack-plugin/stylable-variables.st.css';
@st-import [
  --wst-primary-background-color-rgb,
  --wst-paragraph-2-color-rgb,
  --wst-system-disabled-color-rgb,
  --wst-system-error-color-rgb,
  --wst-links-and-actions-color-rgb,
] from '@wix/wix-site-theme-variables/stylable-variables.st.css';
@st-import [ createColor, setVar, setColor, createFont, createFontWithOverrides ] from '../../common/formatters.st';
@st-import Checkbox from '../internal/WixUiCoreComponents/components/CoreCheckbox/CoreCheckbox.st.css';
@st-import [ errorColor-rgb, focusRing ] from '../../common/palette.st.css';
@st-import ErrorMessageWrapper from '../internal/ErrorMessageWrapper/ErrorMessageWrapper.st.css';
@st-import [ fontFamily ] from '../../common/fonts.st.css';

/*
 * 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 color of the icon on hover
 * @type color
 * @default --wix-color-8
 */
@property st-global(--wix-ui-tpa-checkbox-hover-icon-color);

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

/*
 * The box border color when checkbox is disabled
 * @type color
 * @default --wix-color-29
 */
@property st-global(--wix-ui-tpa-checkbox-disabled-box-border-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
 * @type size
 * @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);

/*
 * Checkbox box background color
 * @type color
 * @default color-1
 */
@property st-global(--wix-ui-tpa-checkbox-input-background-color);

/*
 * Sets width and height of checkbox box
 * @type size
 * @default 16px
 */
@property st-global(--wix-ui-tpa-checkbox-input-size);

/*
 * Checkbox box background opacity
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-checkbox-input-background-opacity);

/*
 * Checkbox box background color on hover
 * @type color
 * @default color-1
 */
@property st-global(--wix-ui-tpa-checkbox-input-hover-background-color);

/*
 * Checkbox box background opacity on hover
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-checkbox-input-hover-background-opacity);

/*
 * Checkbox box background color when checked
 * @type color
 * @default color-1
 */
@property st-global(--wix-ui-tpa-checkbox-input-checked-background-color);

/*
 * Checkbox box background opacity when checked
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-checkbox-input-checked-background-opacity);

/*
 * Checkbox box background color when disabled
 * @type color
 * @default color-1
 */
@property st-global(--wix-ui-tpa-checkbox-input-disabled-background-color);

/*
 * Checkbox box background opacity when disabled
 * @type size
 * @default 1
 */
@property st-global(--wix-ui-tpa-checkbox-input-disabled-background-opacity);

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

/*
* Input border width
* @type size
* @default 1px
*/
@property st-global(--wix-ui-tpa-checkbox-input-border-width);

/*
 * Input border radius
 * @type size
 * @default 0
*/
@property st-global(--wix-ui-tpa-checkbox-input-border-radius);

/*
* Input hover border width
* @type size
* @default 1px
*/
@property st-global(--wix-ui-tpa-checkbox-input-hover-border-width);

/*
* Input hover border radius
* @type size
* @default 0
*/
@property st-global(--wix-ui-tpa-checkbox-input-hover-border-radius);

@property st-global(--wut-error-color);
@property st-global(--wix-ui-tpa-checkbox-label-font-line-height);

/*
 * The space between the checkbox and the label
 * @type size
 * @default 12px
 */
@property st-global(--wix-ui-tpa-checkbox-margin-inline-end);

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

  --default-error-color: value(errorColor-rgb);

  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:
    setColor(--wix-ui-tpa-error-message-wrapper-error-color, --wix-ui-tpa-checkbox-error-color, var(--default-error-color)),
    setVar(--wix-ui-tpa-error-message-wrapper-min-message-height, --wix-ui-tpa-checkbox-error-message-min-height);
}

.root * {
  box-sizing: inherit;
}

.root:box:not(:newErrorMessage),
.root:box:newErrorMessage .container {
  display: flex;
  background-color: createColor(--wix-ui-tpa-checkbox-box-color, var(--wst-primary-background-color-rgb, var(--wix-color-1)));
  border: 1px solid createColor(--wix-ui-tpa-checkbox-box-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), var(--wix-ui-tpa-checkbox-input-main-border-opacity, 0.6));
  border-radius: var(--wix-ui-tpa-checkbox-box-border-radius, 0px);
  box-sizing: border-box;
  position: relative;
  padding: 15px 16px;
}

.core {
  -st-extends: Checkbox;
  -st-states: verticalAlignment(enum(center, top));
  display: flex;
  width: 100%;
}

.core:disabled {
  pointer-events: none;
  border-color: createColor(--wix-ui-tpa-checkbox-disabled-box-border-color, var(--wix-color-29));
}

.core:verticalAlignment(center) {
  align-items: center;
}

.core:verticalAlignment(top){
  align-items: flex-start;
}

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

.core:verticalAlignment(top)::box {
  line-height: var(--wix-ui-tpa-checkbox-label-font-line-height, 24px);
}

.core::box {
  margin-inline-end: var(--wix-ui-tpa-checkbox-margin-inline-end, 12px);
}

.icon {
  box-sizing: content-box;
  display: inline-block;
  width: var(--wix-ui-tpa-checkbox-input-size, 14px);
  height: var(--wix-ui-tpa-checkbox-input-size, 14px);

  border: var(--wix-ui-tpa-checkbox-input-border-width, 1px) solid;
  border-color: createColor(--wix-ui-tpa-checkbox-border-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)), var(--wix-ui-tpa-checkbox-input-main-border-opacity, 0.6));
  border-radius: var(--wix-ui-tpa-checkbox-input-border-radius, 0px);
  background-color: createColor(--wix-ui-tpa-checkbox-input-background-color, var(--wst-primary-background-color-rgb, var(--transparent)), var(--wix-ui-tpa-checkbox-input-background-opacity, 1));;

  font-family: value(fontFamily);
  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;
}

.root:box:not(:checked):not(:disabled) .icon {
  background-color: createColor((--wix-ui-tpa-checkbox-input-background-color, --wix-ui-tpa-checkbox-box-color), var(--wst-primary-background-color-rgb, var(--transparent)), var(--wix-ui-tpa-checkbox-input-background-opacity, var(--wix-ui-tpa-checkbox-box-color-opacity, 1)));
}

.icon {
  position: relative;
}

.icon svg[fill="currentColor"] {
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(var(--wix-ui-tpa-checkbox-input-size, 14px) + 2px);
  height: calc(var(--wix-ui-tpa-checkbox-input-size, 14px) + 2px);
}

.icon path {
  fill: createColor(--wix-ui-tpa-checkbox-icon-color, var(--wst-links-and-actions-color-rgb, var(--wix-color-8)));
}

.root:hover .icon path {
  fill: createColor((--wix-ui-tpa-checkbox-hover-icon-color, --wix-ui-tpa-checkbox-icon-color), var(--wix-color-8));
}

.label {
  -st-mixin: createFontWithOverrides(--wst-paragraph-2-overriden-font, --wst-paragraph-2, '{ "line-height": "24px", "size": "16px"}'),
  createFont((--wix-ui-tpa-checkbox-label-font, --wst-paragraph-2-overriden-font), 'Body-M');
  display: inline-block;
  color: createColor(--wix-ui-tpa-checkbox-text-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-5)));
  transition: color 0.2s linear;
}

.root:hover .label,
.root:focus-within .label {
  color: createColor((--wix-ui-tpa-checkbox-hover-text-color, --wix-ui-tpa-checkbox-text-color), var(--wix-color-5));
}

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

.errorIcon {
  color: rgb(var(--default-error-color)) !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: createColor(--wix-ui-tpa-checkbox-box-border-color, var(--wst-primary-background-color-rgb, var(--wix-color-5)));
}

.root:hover:box:not(:checked) .icon {
  background-color: createColor((--wix-ui-tpa-checkbox-input-hover-background-color, --wix-ui-tpa-checkbox-input-background-color), var(--transparent), var(--wix-ui-tpa-checkbox-input-hover-background-opacity, var(--wix-ui-tpa-checkbox-input-background-opacity, 1)));
}

.root:box:checked {
  background-color: createColor(--wix-ui-tpa-checkbox-icon-color, var(--wix-color-8), 0.1);
  border: 1px solid createColor(--wix-ui-tpa-checkbox-icon-color, var(--wst-paragraph-2-color-rgb, var(--wix-color-8)));
}

.root:box.disabled,
.root:box:disabled {
  border-color: createColor(--wix-ui-tpa-checkbox-disabled-box-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
  background-color: rgb(var(--wix-color-1));
  color: rgb(var(--wst-system-disabled-color-rgb));
}

.root:box.disabled:hover:not(:checked),
.root:box:disabled:focus-within:not(:checked) {
  border-color: createColor(--wix-ui-tpa-checkbox-box-border-color, var(--wix-color-5), 0.6);
}

.root:box.disabled:checked,
.root:box:disabled:checked {
  border-color: rgb(var(--wix-color-29));
  background-color: rgb(var(--wix-color-29), 0.1);
}

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

.root:hover .icon,
.root:focus-within .icon {
  --transparent: 0, 0, 0, 0;
  border-color: createColor((--wix-ui-tpa-checkbox-input-hover-border-color, --wix-ui-tpa-checkbox-border-color), var(--wix-color-5));
  background-color: createColor((--wix-ui-tpa-checkbox-input-hover-background-color, --wix-ui-tpa-checkbox-input-background-color), var(--wst-primary-background-color-rgb, var(--transparent)), var(--wix-ui-tpa-checkbox-input-hover-background-opacity, var(--wix-ui-tpa-checkbox-input-background-opacity, 1)));
  border-width: var(--wix-ui-tpa-checkbox-input-hover-border-width, var(--wix-ui-tpa-checkbox-input-border-width, 1px));
  border-radius: var(--wix-ui-tpa-checkbox-input-hover-border-radius, 0px);
}

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

.root:box:error:not(:checked) {
  border-color: rgb(var(--wst-system-error-color-rgb, var(--default-error-color))) !important;
}

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

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

.root:error:not(:checked) .icon {
  --wix-ui-tpa-checkbox-icon-error-border-color: rgb(var(--wst-system-error-color-rgb));
  border-color: var(--wix-ui-tpa-checkbox-icon-error-border-color, var(--wut-error-color, rgb(var(--default-error-color)))) !important;
}

.root:error:not(:checked):hover .icon,
.root:error:not(:checked):focus-within .icon {
  border-color: createColor(--wix-ui-tpa-checkbox-error-color, var(--default-error-color), 0.7) !important;
}

.root:error:checked .icon {
  border-color: createColor(--wix-ui-tpa-checkbox-error-color, var(--wst-system-error-color-rgb, var(--default-error-color)), 0.7) !important;
  fill: createColor(--wix-ui-tpa-checkbox-error-color, var(--wst-system-error-color-rgb, var(--default-error-color)));
}

.root:error:checked .icon path {
  fill: createColor(--wix-ui-tpa-checkbox-error-color, var(--wst-system-error-color-rgb, var(--default-error-color)));
}

.root:disabled {
  cursor: default;
  pointer-events: none;
  border-color: createColor(--wix-ui-tpa-checkbox-disabled-box-border-color, var(--wix-color-29));
}

.root:disabled .icon {
  border-color: createColor(--wix-ui-tpa-checkbox-disabled-box-border-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
  background-color: createColor(--wix-ui-tpa-checkbox-input-disabled-background-color, var(--wst-primary-background-color-rgb, var(--transparent)), var(--wix-ui-tpa-checkbox-input-disabled-background-opacity, 1));
}

.root:checked:not(:disabled) .icon {
  background-color: createColor((--wix-ui-tpa-checkbox-input-checked-background-color, --wix-ui-tpa-checkbox-input-background-color), var(--wst-primary-background-color-rgb, var(--transparent)), var(--wix-ui-tpa-checkbox-input-checked-background-opacity, var(--wix-ui-tpa-checkbox-input-background-opacity, 1)));
}

.root:checked:hover .icon {
  background-color: createColor((--wix-ui-tpa-checkbox-input-hover-background-color, --wix-ui-tpa-checkbox-input-background-color), var(--transparent), var(--wix-ui-tpa-checkbox-input-hover-background-opacity, var(--wix-ui-tpa-checkbox-input-background-opacity, 1)));
}

.root:disabled .label {
  color: createColor(--wix-ui-tpa-checkbox-disabled-label-color, var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}
.root:disabled .icon path {
  fill: createColor(--wix-ui-tpa-checkbox-disabled-icon-color,var(--wst-system-disabled-color-rgb, var(--wix-color-29)));
}

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


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