$vl-custom-easing: cubic-bezier(1, 0.1, 0, 0.9);

.vl-checkbox {
  position: relative;
  display: inline-block;

  &:not(.vl-checkbox--block) {
    &:not(:last-of-type) {
      margin-right: 1.5rem;
    }
  }

  &__label {
    display: flex;
    flex: 0 0 auto;

    .vl-checkbox__box {
      @include vi;
      @include vi-check;
      position: relative;
      flex: 0 0 1.6rem;
      width: 1.6rem;
      height: 1.6rem;
      margin-top: 0.4rem;
      margin-right: 1rem;
      line-height: 1;

      @include respond-to (small) {
        margin-top: 0.1rem;
      }

      &::before {
        position: absolute;
        display: block;
        font-size: 0.8rem;
        color: $vl-page-bg;
        line-height: 1;
        text-align: center;
        transform: translateZ(0) translate(-50%, -50%) scale(0);
        transition: all 0.3s $vl-custom-easing 0.1s;
        top: 0.8rem;
        left: 0.8rem;
        z-index: 2;
      }

      &::after {
        display: inline-block;
        content: "";
        background: $vl-white;
        width: 1.6rem;
        height: 1.6rem;
        border: 0.1rem $vl-border-color solid;
        outline: 0.2rem transparent solid;
        cursor: pointer;
        overflow: hidden;
        white-space: nowrap;
        transition: all 0.3s $vl-custom-easing;
        z-index: 1;
      }
    }
  }

  &__toggle {
    @include u-visually-hidden;

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

    &:checked {
      + .vl-checkbox__label {
        .vl-checkbox__box {
          &::before {
            transform: translateZ(0) translate(-50%, -50%) scale(1);
          }

          &::after {
            background: $vl-action-color;
            color: $vl-action-color;
            border: 0.1rem $vl-action-color solid;
          }
        }
      }
    }
  }
}

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

// Checkbox disabled modifier
.vl-checkbox--disabled {
  .vl-checkbox__label {
    .vl-checkbox__box {
      &::after {
        background-color: $vl-disabled-bg-color;
        border-color: $vl-disabled-color;
      }
    }
  }

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

// Checkbox single modifier
.vl-checkbox--single {
  margin: 0;

  .vl-checkbox__label {
    padding: 0;

    .vl-checkbox__box {

      &::after {
        position: relative;
        top: auto;
        left: auto;
      }
    }
  }
}

// Checkbox error modifier
.vl-checkbox--error {
  .vl-checkbox__label {
    .vl-checkbox__box {
      &::after {
        background-color: $vl-error-secondary-color;
        border-color: $vl-error-color;
      }
    }
  }

  .vl-checkbox__toggle {
    & + .vl-checkbox__label {
      .vl-checkbox__box {
        &::before {
          color: $vl-error-color;
        }
        &::after {
          background-color: $vl-error-secondary-color;
          border-color: $vl-error-color;
        }
      }
    }
  }
}

// Checkbox success modifier
.vl-checkbox--success {
  .vl-checkbox__label {
    .vl-checkbox__box {
      &::after {
        background-color: $vl-success-secondary-color;
        border-color: $vl-success-color;
      }
    }
  }

  .vl-checkbox__toggle {
    & + .vl-checkbox__label {
      .vl-checkbox__box {
        &::before {
          color: $vl-success-color;
        }
        &::after {
          background-color: $vl-success-secondary-color;
          border-color: $vl-success-color;
        }
      }
    }
  }
}

// Checkbox empty modifier
.vl-checkbox--empty {
  margin-top: 0;
}

// Checkbox switch functionality (iOS toggle)
.vl-checkbox--switch {
  .vl-checkbox__toggle {
    + .vl-checkbox__label {
      .vl-checkbox__box {
        position: relative;
        display: inline-block;
        width: 3.2rem;
        flex: 0 0 3.2rem;
        height: 1.6rem;
        cursor: pointer;
        user-select: none;
        vertical-align: middle;
        background: $vl-border-color;
        border-radius: 2rem;
        transition: all 0.4s ease;
        padding: 0.2rem;

        &::before {
          position: absolute;
          z-index: 1;
          color: $vl-page-bg;
          font-size: 1.3rem;
          font-weight: 500;
          line-height: 1;
          content: "lO";
          top: 0.2rem;
          left: 0.6rem;
          letter-spacing: 1.1rem;
          transform: none;
          font-family: $vl-base-font !important; // sass-lint:disable-line no-important
        }

        &::after {
          position: relative;
          z-index: 2;
          display: block;
          content: "";
          width: 2rem;
          height: 2rem;
          top: -0.4rem;
          left: -0.5rem;
          border-radius: 2em;
          background: $vl-page-bg;
          border: 0.1rem $vl-border-color solid;
          box-shadow: 0 0.1rem 0.2rem $vl-cararra;
          transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
      }
    }

    &:checked {
      + .vl-checkbox__label {
        .vl-checkbox__box {
          background: $vl-action-color;
          &::after {
            left: calc(100% - 1.5rem);
          }
        }
      }
    }

    &:focus {
      + .vl-checkbox__label {
        .vl-checkbox__box {
          &::after {
            box-shadow:
            0 0.1rem 0.2rem $vl-cararra,
            0 0 0 0.2rem $vl-outline-color;
            outline: none;
          }
        }
      }
    }
  }
}

// Deprecated HTML structure, do not use!
.vl-checkbox--switch__wrapper {
  .vl-checkbox--switch {
    @include u-visually-hidden;

    &:focus {
      + .vl-checkbox--switch__label {
        box-shadow: 0 0 0 0.2rem $vl-outline-color;
      }
    }

    &:checked {
      + .vl-checkbox--switch__label {
        background: $vl-action-color;

        &::after {
          left: 50%;
        }

        &:active {
          box-shadow: none;

          &::after {
            margin-left: -0.8em;
          }
        }
      }
    }

    + .vl-checkbox--switch__label {
      position: relative;
      display: inline-block;
      width: 3rem;
      height: 1.6rem;
      cursor: pointer;
      user-select: none;
      vertical-align: middle;
      outline: transparent solid 0.2rem;
      margin: 0 0.5rem 0 0;
      top: -0.1rem;
      background: $vl-border-color;
      border-radius: 2em;
      transition: all 0.4s ease;
      padding: 0.2rem;

      span {
        position: relative;
        display: block;
        width: inherit;

        &::before,
        &::after {
          position: absolute;
          color: $vl-page-bg;
          font-size: 1.2rem;
          font-weight: 500;
          line-height: 1;
          top: 0.1rem;
        }

        &::before {
          content: "I";
          left: 0.6rem;
        }

        &::after {
          content: "O";
          right: 0.6rem;
        }
      }

      &:hover {
        &::after {
          will-change: padding;
        }
      }

      &:active {
        box-shadow: inset 0 0 0 2em $vl-cararra;

        &::after {
          padding-right: 0.8em;
        }
      }

      &::after,
      &::before {
        position: relative;
        display: block;
        content: "";
        width: 2rem;
        height: 2rem;
        top: -0.4rem;
      }

      &::before {
        display: none;
      }

      &::after {
        left: -0.5rem;
        border-radius: 2em;
        background: $vl-page-bg;
        border: 0.1rem $vl-border-color solid;
        box-shadow: 0 0.1rem 0.2rem $vl-cararra;
        transition:
        left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        padding 0.3s ease,
        margin 0.3s ease;
      }
    }
  }
}