.checkbox {
  position: relative;
  margin: 2px 0 3px;
  &__checkbox,
  &__radio {
    position: absolute;
    opacity: 0;
    .is-small &:checked + .checkbox__label::before {
      background-size: 84%;
    }
  }
  &__checkbox {
    &:checked + .checkbox__label::before {
      background-image: inline-image('form/checkbox/checked.svg');
      background-position: center 40%;
      background-repeat: no-repeat;
    }
    &:disabled + .checkbox__label {
      cursor: default;
      &:before {
        opacity: .7;
      }
      &:hover:before {
        border-color: $color-lighten;
      }
    }
  }
  &__radio {
    &:checked + .checkbox__label::after {
      content: '';
      width: 8px;
      height: 8px;
      position: absolute;
      top: 9px;
      left: 6px;
      border-radius: 50%;
      background: $attention-color;
      z-index: 2;
    }
  }
  &__label {
    position: relative;
    padding: 3px 0 0 30px;
    display: block;
    font: 17px/21px $font-futurabook;
    &::before {
      content: '';
      display: block;
      position: absolute;
      top: 3px;
      left: 0;
      z-index: 2;
      width: 20px;
      height: 20px;
      border-radius: 3px;
      border: 1px solid $color-lighten;
      background-color: $dirty-white-color;
      box-sizing: border-box;
      transition: border-color .3s ease-out, background-color .3s ease-out;
    }
    &:hover::before {
      border-color: $gray-color;
    }
    &_radio {
      &:before {
        border-radius: 50%;
      }
    }
    &_inline {
      display: inline-block;
    }
    .is-small & {
      padding: 0 0 0 25px;
      line-height: 18px;
      &::before {
        width: 15px;
        height: 15px;
        top: 2px;
      }
    }
  }
}