$span-translate: -8px, -4px;

@if $css-variable-enabled {
  $checkbox-border-radius: var(--checkbox-border-radius);
  $checkbox-border-width: var(--checkbox-border-width);
  $checkbox-label-margin: var(--checkbox-label-margin);
  $checkbox-margin: var(--checkbox-margin);
  $checkbox-padding: var(--checkbox-padding);
  $primary-transition: var(--primary-transition);
}

.#{$prefix}checkbox {
  display: inline-block;
  user-select: none;
  margin: $checkbox-margin;

  span {
    vertical-align: middle;

    ~ span {
      margin-left: $checkbox-label-margin;
    }
  }

  > input {
    display: inline-block;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    opacity: 0;

    + span {
      overflow: hidden;
      display: inline-block;
      border-style: solid;
      border-color: var(--checkbox-border-color);
      position: relative;
      border-radius: $checkbox-border-radius;
      border-width: $checkbox-border-width;
      padding: $checkbox-padding;
      transition: $primary-transition;

      &:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        border-style: solid;
        border-width: 0 2px 2px 0;
        border-color: var(--checkbox-checkmark-color);
        width: 6px;
        height: 13px;
        transform: rotate(45deg) translate(10px, 10px);
        transition: $primary-transition;
      }
    }

    &:checked + span {
      background-color: var(--checkbox-checked-border-color);
      border-color: var(--checkbox-checked-border-color);

      &:after {
        transform: rotate(45deg) translate($span-translate);
      }
    }

    &:focus + span, &.#{$prefix}focused + span {
      box-shadow: 0 0 0 2px var(--checkbox-border-spread-color);
    }

    &:indeterminate + span:after {
      width: 0;
      border-color: var(--checkbox-checked-border-color);
      transform: rotate(90deg) translate(-6px, 1px);
    }
  }

  &.#{$prefix}outlined > input + span {
    background-color: $transparent !important;

    &:after {
      border-color: var(--checkbox-checked-border-color);
    }
  }

  &.#{$prefix}circle, &.#{$prefix}circular {
    > input + span {
      border-radius: 100px;
    }
  }

  @each $name, $color, $text-color, $skip, $light-color in $item-colors {
    @if $name {
      &.#{$prefix}#{$name} > input:checked + span {
        background-color: $color;
        border-color: $color;
      }

      &.#{$prefix}#{$name} > input:checked + span:after {
        border-color: $text-color;
      }

      &.#{$prefix}#{$name} > input:focus + span,
      &.#{$prefix}#{$name} > input.#{$prefix}focused + span {
        border-color: $color;
        box-shadow: 0 0 0 2px $light-color;
      }

      &.#{$prefix}outlined.#{$prefix}#{$name} > input:checked + span:after,
      &.#{$prefix}#{$name} > input:indeterminate + span:after {
        border-color: $color;
      }
    }
  }

  &[disabled] {
    pointer-events: none;

    span {
      color: var(--item-disabled-fg-color);
    }

    > input {
      + span {
        background-color: var(--item-disabled-bg-color);
        border-color: var(--item-disabled-bg-color);
        box-shadow: 0 0 0 0 $transparent;

        &:after {
          border-color: var(--item-disabled-fg-color);
        }
      }
    }
  }
}