.vl-checkbox {
  &__label {
    font-weight: 300;
    
    .vl-checkbox__box {
      &:hover::after {
        border-color: $vl-primary-blue;
        box-shadow: inset 0 0 0 0.1rem $vl-primary-blue;
      }
    }
  }

  &__toggle {
    &:focus {
      + .vl-checkbox__label {
        .vl-checkbox__box {
          &::after {
            border-color: $vl-primary-blue;
            outline: 0.2rem solid $vl-primary-blue;
          }
        }
      }
    }

    &:checked {
      + .vl-checkbox__label {
        .vl-checkbox__box {
          &::after {
            background: $vl-secondary-blue;
            color: $vl-secondary-blue;
            border: 0.1rem $vl-secondary-blue solid;
          }
        }
      }
    }
  }
}

.vl-checkbox--block {
  display: block;
  margin: 0;
}

// Checkbox disabled modifier
.vl-checkbox--disabled {
  .vl-checkbox__toggle {
    &:checked {
      + .vl-checkbox__label {
        .vl-checkbox__box {
          &::after {
            color: $vl-black;
            background: $vl-white;
            border: 0.1rem $vl-shade-light solid;
          }
        }
      }
    }
  }
}

// Checkbox error modifier
.vl-checkbox--error {
  .vl-checkbox__label {
    .vl-checkbox__box {
      &::after {
        box-shadow: inset 0 0 0 0.1rem $vl-error-color;
      }
    }
  }

  .vl-checkbox__toggle {
    & + .vl-checkbox__label {
      .vl-checkbox__box {
        &::after {
          background-color: transparent;
          box-shadow: inset 0 0 0 0.1rem $vl-error-color;
        }
      }
    }

    &:checked {
      + .vl-checkbox__label {
        .vl-checkbox__box {
          &::before {
            color: $vl-white;
          }
          &::after {
            border: 0.1rem $vl-error-color solid;
            background: $vl-error-color;
          }
        }
      }
    }
  }
}