$size: var(--wds-checkbox-size, 16px);
$border-radius: var(
  --wds-checkbox-border-radius,
  var(--wds-border-radius-200, 4px)
);
$border: var(
  --wds-checkbox-border,
  var(
    --wds-color-border-standard-secondary-active,
    var(--wsr-color-B10, #116dff)
  )
);
$border-hover: var(
  --wds-checkbox-border-hover,
  var(
    --wds-color-border-standard-secondary-active,
    var(--wsr-color-B10, #116dff)
  )
);
$border-active: var(
  --wds-checkbox-border-active,
  var(
    --wds-color-border-standard-secondary-active,
    var(--wsr-color-B10, #116dff)
  )
);
$border-active-hover: var(
  --wds-checkbox-border-active-hover,
  var(--wds-color-black-100-transparent-0, var(--wsr-color-B00, #084ebd))
);
$border-disabled: var(
  --wds-checkbox-border-disabled,
  var(
    --wds-color-border-standard-secondary-disabled,
    var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
  )
);
$border-active-disabled: var(
  --wds-checkbox-border-active-disabled,
  var(
    --wds-color-border-standard-secondary-disabled,
    var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3))
  )
);
$fill: var(
  --wds-checkbox-fill,
  var(--wds-color-fill-standard-tertiary, var(--wsr-color-D80, #ffffff))
);
$fill-hover: var(
  --wds-checkbox-fill-hover,
  var(--wds-color-fill-standard-tertiary-hover, var(--wsr-color-B50, #e7f0ff))
);
$fill-active: var(
  --wds-checkbox-fill-active,
  var(--wds-color-fill-standard-primary, var(--wsr-color-B10, #116dff))
);
$fill-active-hover: var(
  --wds-checkbox-fill-active-hover,
  var(--wds-color-fill-standard-primary-hover, var(--wsr-color-B00, #084ebd))
);
$fill-disabled: var(
  --wds-checkbox-fill-disabled,
  var(
    --wds-color-fill-standard-secondary-disabled,
    var(--wsr-color-D10-05, rgba(0, 6, 36, 0.05))
  )
);
$fill-active-disabled: var(
  --wds-checkbox-fill-active-disabled,
  var(
    --wds-color-fill-standard-secondary-disabled,
    var(--wsr-color-D10-05, rgba(0, 6, 36, 0.05))
  )
);
$fill-disabled-in-area: var(
  --wds-checkbox-fill-disabled,
  var(--wds-color-fill-standard-secondary-disabled, transparent)
);
$fill-active-disabled-in-area: var(
  --wds-checkbox-fill-active-disabled,
  var(--wds-color-fill-standard-secondary-disabled, transparent)
);
$icon: var(
  --wds-checkbox-icon,
  var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff))
);
$icon-disabled: var(
  --wds-checkbox-icon-disabled,
  var(--wds-color-text-disabled, var(--wsr-color-D10-30, rgba(0, 6, 36, 0.3)))
);
$label-disabled: var(
  --wds-checkbox-label-disabled,
  var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))
);
$label-font-size-small: var(
  --wds-checkbox-label-font-size-small,
  var(--wds-font-size-body-small, var(--wsr-text-font-size-small, 14px))
);
$label-line-height-small: var(
  --wds-checkbox-label-font-line-height-small,
  var(
    --wds-font-line-height-body-small,
    var(--wsr-text-line-height-small, 18px)
  )
);
$label-font-size-medium: var(
  --wds-checkbox-label-font-size-medium,
  var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px))
);
$label-line-height-medium: var(
  --wds-checkbox-label-font-line-height-medium,
  var(
    --wds-font-line-height-body-medium,
    var(--wsr-text-line-height-medium, 24px)
  )
);
$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-400, 8px)
);
$area-padding: var(
    --wds-select-area-padding-vertical,
    var(--wds-space-200, 12px)
  )
  var(--wds-select-area-padding-horizontal, var(--wds-space-300, 16px));
$area-fill: var(
  --wds-select-area-fill,
  var(--wds-color-blue-600, var(--wsr-color-B60, #f4f7ff))
);
$area-fill-hover: var(
  --wds-select-area-fill-hover,
  var(--wds-color-blue-500, var(--wsr-color-B50, #e7f0ff))
);
$area-fill-active: var(
  --wds-select-area-fill-active,
  var(--wds-color-blue-400, var(--wsr-color-B50, #e7f0ff))
);
$area-fill-selected: var(
  --wds-select-area-fill-active,
  var(--wds-color-blue-400, var(--wsr-color-B40, #d6e6fe))
);
$area-fill-disabled: var(
  --wds-select-area-fill-disabled,
  var(--wds-color-white-transparent-0, transparent)
);
$area-outline: var(
  --wds-color-border-standard-secondary,
  var(--wsr-color-B40, #d6e6fe)
);
$area-outline-hover: var(
  --wds-color-border-standard-secondary-hover,
  var(--wsr-color-B20, #5999ff)
);
$area-outline-selected: var(
  --wds-color-border-standard-secondary-active,
  var(--wsr-color-B10, #116dff)
);
$area-outline-disabled: var(
  --wds-color-border-standard-secondary-disabled,
  var(--wsr-color-D60, #dfe5eb)
);
$focus-outer: var(
  --wds-outline-focus-outer,
  3px solid var(--wsr-color-B10, #116dff)
);
$focus-inner: var(
  --wds-outline-focus-inner,
  1px solid var(--wsr-color-D80, #ffffff)
);

.checkbox {
  display: inline-flex;
  position: relative;
  /* stylelint-disable-next-line plugin/use-baseline */
  outline: none;
  min-height: 24px;

  &--ellipsis {
    min-width: 0;
  }

  :global([dir='rtl']) & {
    direction: rtl;
  }

  &__label {
    cursor: default;
    max-width: 100%;
    width: 100%;
    display: flex;
  }

  &__label-inner {
    display: flex;
    gap: var(--wds-space-200, 12px);
    width: 100%;
  }

  &__children {
    cursor: pointer;
    width: 100%;
  }

  &#{&}--size-small #{&}__label #{&}__children {
    font-size: $label-font-size-small;
    line-height: $label-line-height-small;
  }

  &#{&}--size-medium #{&}__label #{&}__children {
    font-size: $label-font-size-medium;
    line-height: $label-line-height-medium;
  }

  &--disabled &__label &__children {
    color: $label-disabled;
  }

  :global([dir='rtl']) &__children {
    padding-left: 0;
    padding-right: 12px;
  }

  &__box {
    position: relative;
    width: $size;
    height: $size;
    border-radius: $border-radius;
    box-sizing: border-box;
    cursor: pointer;
    border: 1px solid $border;
    background-color: $fill;
  }

  & #{&}__box {
    outline-offset: 1px;
  }

  & #{&}__box::before {
    inset: -1px;
  }

  &__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: $icon;
    opacity: 0;
  }

  &__inner > svg {
    width: 8px;
    height: 8px;
  }

  &--v-align-center &__label,
  &--v-align-center &__label &__label-inner {
    align-items: center;
  }

  &--v-align-top &__outer {
    margin-top: 4px;
    display: flex;
  }

  &--selection-area-always,
  &--selection-area-hover {
    cursor: pointer;
    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;
  }

  @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;
  }

  &--selection-area-always &__outer,
  &--selection-area-hover &__outer {
    padding: 4px 0;
  }

  &:not(#{&}--disabled)#{&}--selection-area-always,
  &:not(#{&}--disabled)#{&}--selection-area-hover,
  &:not(#{&}--disabled)#{&}--selection-area-always &__label,
  &:not(#{&}--disabled)#{&}--selection-area-hover &__label,
  &:not(#{&}--disabled)#{&}--selection-area-always &__outer,
  &:not(#{&}--disabled)#{&}--selection-area-hover &__outer {
    cursor: pointer;
  }

  &--selection-area-always#{&}--selection-area-skin-outlined &__label {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 1px solid $area-outline;
    outline-offset: -1px;
  }

  @media (hover: hover) {
    &:not(
        #{&}--disabled
      )#{&}--selection-area-always#{&}--selection-area-skin-outlined:hover
      &__label,
    &:not(
        #{&}--disabled
      )#{&}--selection-area-hover#{&}--selection-area-skin-outlined:hover
      &__label {
      /* stylelint-disable-next-line plugin/use-baseline */
      outline: 1px solid $area-outline-hover;
      outline-offset: -1px;
    }
  }

  &:not(
      #{&}--disabled
    )#{&}--selection-area-always#{&}--selection-area-skin-outlined:active
    &__label,
  &:not(
      #{&}--disabled
    )#{&}--selection-area-hover#{&}--selection-area-skin-outlined:active
    &__label {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 2px solid $area-outline-hover;
    outline-offset: -2px;
  }

  &--selection-area-hover#{&}--selection-area-skin-filled#{&}--selection-checked,
  &--selection-area-hover#{&}--selection-area-skin-filled#{&}--selection-indeterminate,
  &--selection-area-always#{&}--selection-area-skin-filled#{&}--selection-checked,
  &--selection-area-always#{&}--selection-area-skin-filled#{&}--selection-indeterminate {
    background-color: $area-fill-selected;
  }

  &--selection-area-hover#{&}--selection-area-skin-outlined#{&}--selection-checked
    &__label,
  &--selection-area-hover#{&}--selection-area-skin-outlined#{&}--selection-indeterminate
    &__label,
  &--selection-area-always#{&}--selection-area-skin-outlined#{&}--selection-checked
    &__label,
  &--selection-area-always#{&}--selection-area-skin-outlined#{&}--selection-indeterminate
    &__label {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 2px solid $area-outline-selected;
    outline-offset: -2px;
    padding: 0;
  }

  @media (hover: hover) {
    &:not(
        #{&}--disabled
      )#{&}--selection-area-hover#{&}--selection-area-skin-outlined#{&}--selection-checked:hover
      &__label,
    &:not(
        #{&}--disabled
      )#{&}--selection-area-hover#{&}--selection-area-skin-outlined#{&}--selection-indeterminate:hover
      &__label,
    &:not(
        #{&}--disabled
      )#{&}--selection-area-always#{&}--selection-area-skin-outlined#{&}--selection-checked:hover
      &__label,
    &:not(
        #{&}--disabled
      )#{&}--selection-area-always#{&}--selection-area-skin-outlined#{&}--selection-indeterminate:hover
      &__label {
      /* stylelint-disable-next-line plugin/use-baseline */
      outline: 2px solid $area-outline-hover;
      outline-offset: -2px;
      padding: 0;
    }
  }

  &--selection-area-always#{&}--v-align-top &__outer {
    margin-top: 0;
  }

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

  &--selection-checked &__box &__inner,
  &--selection-indeterminate &__box &__inner {
    opacity: 1;
  }

  &--selection-area-always#{&}--selection-area-skin-outlined:has(
      > #{&}__input:focus-visible
    ),
  &--selection-area-hover#{&}--selection-area-skin-outlined:has(
      > #{&}__input:focus-visible
    ) {
    position: relative;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: $focus-outer;
    outline-offset: 1px;
  }

  &--selection-area-always#{&}--selection-area-skin-outlined:has(
      > #{&}__input:focus-visible
    )::before,
  &--selection-area-hover#{&}--selection-area-skin-outlined:has(
      > #{&}__input:focus-visible
    )::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: $focus-inner;
  }

  &--disabled &__children {
    pointer-events: none;
  }

  &--disabled &__box {
    pointer-events: none;
    border-color: $border-disabled;
    background-color: $fill-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;
  }

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

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

  &--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;
  }

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

  &--disabled#{&}--selection-area-always#{&}--selection-area-skin-outlined
    &__label,
  &--disabled#{&}--selection-area-always#{&}--selection-area-skin-outlined#{&}--selection-checked
    &__label {
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 1px solid $area-outline-disabled;
    outline-offset: -1px;
  }

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

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

    &--selection-checked:not(#{&}--disabled):hover &__box,
    &--selection-indeterminate:not(#{&}--disabled):hover &__box {
      border: 1px solid $border-active-hover;
      background-color: $fill-active-hover;
    }
  }
}