.checkbox {
  position: relative;

  &--sm {
    .checkbox__label {
      min-height: 1.8rem;
      padding-top: 1px;
      padding-left: 2.1rem;

      &::before {
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 3px;
      }

      &::after {
        top: 0.15rem;
        left: 0.15rem;

        width: 1.2rem;
        height: 1.2rem;

        background-size: 1.2rem;
      }
    }
    a {
      min-height: 1.8rem;
      position: relative;
      padding: 3px 0 0 0;
      font-size: 1.4rem;
      line-height: 1.15;
      text-decoration: none;
      color: #606060;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
    }  }
}

.checkbox__input {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  appearance: none;

  &:focus {
    + .checkbox__label {

      &::before {
        border-color: $primary;
      }
    }
  }

  &:checked + .checkbox__label {
    &::before {
      border-color: $primary;
      background-color: $primary;
    }

    &::after {
      opacity: 1;
    }
  }
}

.checkbox__label {
  min-height: 1.8rem;
  position: relative;
  padding-left: 2.6rem;
  padding-top: 3px;
  display: inline-block;

  font-size: 1.4rem;
  line-height: 1.15;
  color: #606060;
  cursor: pointer;

  &::before,
  &::after {
    content: "";
    display: block;

    cursor: pointer;

    position: absolute;
    z-index: 1;
  }

  &::before {
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid rgba(0, 0, 0, .4);
    border-radius: $radius;

    transition: border .2s linear;

    top: 1px;
    left: 0;
  }

  &::after {
    width: 1.4rem;
    height: 1.4rem;

    background: url("/shop/images/checkbox-checked.svg") center no-repeat;
    background-size: 1.4rem;
    opacity: 0;

    transition: opacity .1s linear;

    top: 2px;
    left: 2px;
  }

  &:hover {
    &::before {
      border-color: #001E60;
    }
  }

  &--flex {
    display: flex;
    justify-content: space-between;
  }
}

.checkbox__count {
  font-size: 1.2rem;
  color: #9E9E9E;
}