$size: var(--wds-checkbox-size, var(--wds-space-400));
$border: var(--wds-checkbox-border, var(--wds-color-border-dark-primary));
$border-hover: var(
  --wds-checkbox-border-hover,
  var(--wds-color-border-dark-primary)
);
$border-disabled: var(
  --wds-checkbox-border-disabled,
  var(--wds-color-border-dark-primary-disabled)
);
$border-active-disabled: var(
  --wds-checkbox-border-active-disabled,
  var(--wds-color-black-100-transparent-0)
);
$fill-active-disabled: var(
  --wds-checkbox-fill-active-disabled,
  var(--wds-color-fill-standard-primary-disabled)
);
$fill-active-disabled-in-area: var(
  --wds-checkbox-fill-active-disabled,
  var(--wds-color-fill-standard-primary-disabled, transparent)
);
$icon-disabled: var(
  --wds-checkbox-icon-disabled,
  var(--wds-color-text-disabled-light)
);
$border-active: var(
  --wds-checkbox-border-active,
  var(--wds-color-border-standard-secondary-active)
);
$error-border: var(
  --wds-color-border-destructive-secondary-active,
  var(--wsr-color-R10, #e62214)
);

$area-border-radius: var(
  --wds-select-area-border-radius,
  var(--wds-border-radius-200)
);
$area-padding: var(--wds-select-area-padding-vertical, var(--wds-space-300))
  var(--wds-select-area-padding-horizontal, var(--wds-space-400));
$area-fill: var(--wds-select-area-fill, var(--wds-color-black-750));
$area-fill-hover: var(--wds-select-area-fill-hover, var(--wds-color-black-700));
$area-fill-active: var(
  --wds-select-area-fill-active,
  var(--wds-color-blue-400)
);
$area-fill-disabled: var(
  --wds-select-area-fill-disabled,
  var(--wds-color-white-transparent-0, transparent)
);

.checkbox {
  &__box {
    width: $size;
    height: $size;
    border: 1px solid $border;
  }

  &--selection-checked &__box,
  &--selection-indeterminate &__box {
    border: 1px solid $border-active;
  }

  &--selection-area-always,
  &--selection-area-hover {
    border-radius: $area-border-radius;
  }

  &--selection-area-always &__label,
  &--selection-area-hover &__label {
    border-radius: $area-border-radius;
  }

  &--selection-area-always &__label &__label-inner,
  &--selection-area-hover &__label &__label-inner {
    padding: $area-padding;
  }

  &--selection-area-always#{&}--selection-area-skin-filled {
    background-color: $area-fill;
  }

  &--disabled#{&}--selection-area-always,
  &--disabled#{&}--selection-area-hover {
    background-color: $area-fill-disabled;
  }

  @media (hover: hover) {
    &:not(
        #{&}--disabled
      )#{&}--selection-area-always#{&}--selection-area-skin-filled:hover,
    &:not(
        #{&}--disabled
      )#{&}--selection-area-hover#{&}--selection-area-skin-filled:hover {
      background-color: $area-fill-hover;
    }
  }

  &:not(
      #{&}--disabled
    )#{&}--selection-area-always#{&}--selection-area-skin-filled:active,
  &:not(
      #{&}--disabled
    )#{&}--selection-area-hover#{&}--selection-area-skin-filled:active {
    background-color: $area-fill-active;
  }

  &--disabled &__box {
    border-color: $border-disabled;
  }

  &--disabled#{&}--selection-checked &__box,
  &--disabled#{&}--selection-indeterminate &__box {
    border-color: $border-active-disabled;
    background-color: $fill-active-disabled;
  }

  &--disabled &__box &__inner {
    color: $icon-disabled;
  }

  &--error &__box {
    border-color: $error-border;
  }

  &--disabled#{&}--selection-area-always#{&}--selection-checked &__box,
  &--disabled#{&}--selection-area-always#{&}--selection-indeterminate &__box,
  &--disabled#{&}--selection-area-hover#{&}--selection-checked &__box,
  &--disabled#{&}--selection-area-hover#{&}--selection-indeterminate &__box {
    background-color: $fill-active-disabled-in-area;
  }

  @media (hover: hover) {
    &--selection-unchecked:not(#{&}--disabled):hover &__box {
      border-color: $border-hover;
    }
  }
}