.checkbox,
.radio {
  position: relative;
  height: 23px;
  margin-bottom: 5px;

  label {
    width: 23px;
    height: 23px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    border-radius: 4px;
    border: 1px solid $gray;
    margin-right: 5px;

    &:after {
      content: '';
      width: 13px;
      height: 8px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid $blue;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }

    &:hover::after {
      opacity: 1;
      border: 3px solid $blue-medium;
      border-top: 0;
      border-right: 0;
    }
  }

  input[type="checkbox"],
  input[type="radio"] {
    visibility: hidden;
    margin-right: 12px;

    &:checked + label {
      border: 1px solid $blue;

      &:after {
        opacity: 1;
      }

      &:hover::after {
        border: 3px solid $blue;
        border-top: none;
        border-right: none;
      }
    }

    &:disabled + label {
      background: $gray-light;
      border: 1px solid $gray;
      cursor: not-allowed;

      &:after {
        opacity: 0;
      }

      &:hover::after {
        opacity: 0;
      }
    }

    &:checked:disabled + label {
      border: 1px solid $gray-medium;

      &:after {
        opacity: 1;
        border: 3px solid $gray-medium;
        border-top: none;
        border-right: none;
      }
    }

  }
}

.radio {
  label {
    border-radius: 50%;

    &:after {
      width: 13px;
      height: 13px;
      border: none;
      background: transparent;
      transform: none;
      border-radius: 50%;
    }

    &:hover::after {
      border: none;
      background: $blue-medium;
    }
  }

  input[type=radio] {
    &:checked + label {
      border: 1px solid $blue;

      &:after,
      &:hover::after {
        width: 13px;
        height: 13px;
        border: none;
        background: $blue;
      }
    }
  }
}