/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
:host {
  --checkbox-bg-hover: var(--joy-color-secondary-50);
  --checkbox-bg-checked-hover: var(--joy-color-secondary-50);
  --checkbox-bg-checked-active: var(--joy-color-secondary-90);
  --checkbox-bg-checked: var(--joy-color-secondary-30);
  --checkbox-color: var(--joy-color-neutral-60);
  --checkbox-color-checked: var(--joy-color-secondary-50);
  --checkbox-bg-disabled: var(--joy-color-neutral-30);
  --checkbox-color-disabled: var(--joy-color-neutral-40);
  --checkbox-border-disabled: var(--joy-color-neutral-30);
  --checkbox-border-active: var(--joy-color-neutral-60);
  --checkbox-color-slot-link: var(--joy-color-secondary-50);
  --checkbox-radius: var(--joy-core-radius-1);
  --checkbox-active-size: 26px;
  --checkbox-size: 20px;
  --checkbox-margin: 0 var(--joy-core-spacing-2) 0 0;
  --checkbox-label-margin: var(--joy-core-spacing-4);
  --checkbox-label-padding: 0;
  font-weight: var(--joy-font-weight-normal);
  display: flex;
  flex-wrap: wrap;
}

.joy-checkbox {
  --checkbox-font-weight: var(--joy-font-weight-normal);
  display: flex;
  position: relative;
  cursor: pointer;
  width: 100%;
  color: var(--joy-color-neutral-60);
  font-size: var(--joy-font-size-primary-400);
  font-family: var(--joy-font-family-base);
  line-height: var(--checkbox-size);
  font-weight: var(--checkbox-font-weight);
  -webkit-touch-callout: none;
  user-select: none;
  margin-bottom: var(--checkbox-label-margin);
  padding: var(--checkbox-label-padding);
}
.joy-checkbox.joy-checkbox__checked, .joy-checkbox.joy-checkbox__indeterminate {
  --checkbox-font-weight: var(--joy-font-weight-bold);
}
.joy-checkbox .joy-checkbox__input {
  display: flex;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0 var(--joy-core-spacing-2) 0 0;
  padding: 0;
  appearance: none;
  box-sizing: border-box;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  background-color: white;
  border: var(--joy-form-border-width) solid var(--joy-color-secondary-30);
  border-radius: var(--checkbox-radius);
  transition: background-color var(--joy-transition-duration-default) var(--joy-transition-timing-function);
}
.joy-checkbox:hover .joy-checkbox__input {
  border-color: var(--joy-color-state-hover);
}
.joy-checkbox:hover .joy-checkbox__input:checked {
  color: var(--checkbox-color-checked);
  background-color: var(--checkbox-bg-checked-hover);
}
.joy-checkbox .joy-checkbox__input:focus {
  border-color: var(--joy-color-state-focus);
}
.joy-checkbox .joy-checkbox__input:focus-visible {
  outline: none;
}
.joy-checkbox .joy-checkbox__input:focus-visible ~ *:before {
  position: absolute;
  box-sizing: content-box;
  top: -4px;
  left: -32px;
  content: "";
  display: flex;
  width: var(--checkbox-active-size);
  height: var(--checkbox-active-size);
  border-radius: var(--joy-core-radius-2);
  border: 1px solid var(--checkbox-border-active);
}
.joy-checkbox .joy-checkbox__input:indeterminate {
  --checkbox-font-weight: var(--joy-font-weight-bold);
  color: var(--checkbox-color-checked);
  background-color: var(--checkbox-bg-checked);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75%;
  background-image: url("data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDE0IDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjY2NjYzIDFIMTIuMzMzMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
}
.joy-checkbox .joy-checkbox__input:checked {
  --checkbox-font-weight: var(--joy-font-weight-bold);
  color: var(--checkbox-color-checked);
  background-color: var(--checkbox-bg-checked);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75%;
  background-image: url("data:image/svg+xml; utf8, %3Csvg%20width%3D%2211%22%20height%3D%229%22%20viewBox%3D%220%200%2011%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.0831%200.000388909L3.66655%206.41696L0.91653%203.66694L0%204.5839L2.75002%207.33349L3.66655%208.25002L4.58308%207.33349L10.9997%200.916919L10.0831%200.000388909Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%3C%2Fsvg%3E");
}
.joy-checkbox:active .joy-checkbox__input:checked {
  background-color: var(--checkbox-bg-checked-active);
}
.joy-checkbox:active .joy-checkbox__input:checked + .joy-checkbox__content-wrapper {
  font-weight: bold;
}
.joy-checkbox.joy-checkbox__disabled {
  cursor: not-allowed;
}
.joy-checkbox .joy-checkbox__input:disabled {
  border-color: var(--joy-color-neutral-30);
}
.joy-checkbox .joy-checkbox__input:disabled ~ .joy-checkbox__content-wrapper {
  color: var(--joy-color-neutral-40);
}
.joy-checkbox .joy-checkbox__input:disabled:checked, .joy-checkbox .joy-checkbox__input:disabled:indeterminate {
  background-color: var(--joy-color-neutral-30);
}
.joy-checkbox.joy-checkbox__invalid .joy-checkbox__input {
  border-color: var(--joy-color-error-50);
}
.joy-checkbox.joy-checkbox__invalid .joy-checkbox__input:checked {
  background-color: var(--joy-color-error-50);
}
.joy-checkbox .joy-checkbox__content-wrapper {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  text-align: left;
  position: relative;
  flex: 1;
  color: var(--checkbox-color);
}
.joy-checkbox .joy-checkbox__content-wrapper .joy-checkbox__content {
  width: 100%;
  flex: 1;
}
.joy-checkbox .joy-checkbox__content-wrapper .joy-checkbox__content > * {
  display: block;
  width: 100%;
  margin-top: 0;
  margin-bottom: var(--joy-core-spacing-1);
}

::slotted(a) {
  --link-default-color: var(--joy-color-secondary-30);
  --link-default-color-hover: var(--joy-color-secondary-50);
  --link-default-color-visited: var(--joy-color-secondary-90);
  --link-border-color-focus: var(--joy-color-neutral-60);
  padding: 0 2px;
  color: var(--link-default-color);
  font-weight: var(--joy-font-weight-normal);
  font-size: var(--joy-font-size-primary-300);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
}

::slotted(small) {
  font-weight: var(--joy-font-weight-normal);
  font-size: var(--joy-font-size-primary-200);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
}

::slotted([slot=checkbox-error]) {
  width: 100% !important;
}