// .checkbox-item {
//   display: block;
//   position: relative;
//   padding-left: 30px;
//   margin-bottom: 7px;
//   width: 100%;
//   cursor: pointer;
//   input[type='checkbox'],
//   input[type='radio'] {
//     position: absolute;
//     opacity: 0;
//     cursor: pointer;
//     height: 1px;
//     width: 1px;
//     left: 0;
//     top: 50%;
//     pointer-events: none;
//   }

//   .checkmark {
//     position: absolute;
//     top: 49%;
//     transform: translateY(-50%);
//     left: 0;
//     height: 18px;
//     width: 18px;
//     border: 1px solid $primary-color;
//     &--radio {
//       border-radius: 50%;
//     }
//   }
//   &:hover input ~ .checkmark {
//     background-color: lighten($primary-color, 30%);
//   }
//   input:checked ~ .checkmark {
//     background-color: $primary-color;
//   }

//   .checkmark:after {
//     content: '';
//     position: absolute;
//     display: none;
//   }
//   input:checked ~ .checkmark:after {
//     display: block;
//   }
// }

//checkbox
.checkbox-wrap {
  display: block;
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  user-select: none;
}
.checkbox-wrap input {
  position: absolute;
  opacity: 1;
  cursor: pointer;
  left: 2px;
  top: 4px;
  height: 2px;
  width: 2px;
  box-shadow: none;
}
.checkmark {
  position: absolute;
  top: 0px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: inset 0px 0 0px 1px #a9a9a9;
  transition: all 0.2s;
}
.checkbox-wrap:hover input ~ .checkmark {
  background-color: #fff;
}
.checkbox-wrap input:checked ~ .checkmark {
  background-color: $primary-color;
  box-shadow: inset 0px 0 0px 1px $primary-color;
}
.checkmark:after {
  content: '';
  position: absolute;
  display: none;
}
.checkbox-wrap input:checked ~ .checkmark:after {
  display: block;
}
.checkbox-wrap .checkmark:after {
  left: 7px;
  top: 3px;
  width: 6px;
  height: 12px;
  border: 1px solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.pay-way-wrap {
  .radio-wrap {
    display: block;
    position: relative;
    padding-left: 22px;
    cursor: pointer;
    user-select: none;
  }
  .radio-wrap input {
    position: absolute;
    opacity: 1;
    cursor: pointer;
    left: 3px;
    top: 4px;
    height: 5px;
    width: 5px;
  }
  .checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: inset 0px 0 0px 1px #a9a9a9;
    transition: all 0.2s;
  }
  .radio-wrap:hover input ~ .checkmark {
    background-color: #fff;
  }
  .radio-wrap input:checked ~ .checkmark {
    background-color: $primary-color;
    box-shadow: inset 0px 0 0px 1px $primary-color;
  }
  .checkmark:after {
    content: '';
    position: absolute;
    display: none;
  }
  .radio-wrap input:checked ~ .checkmark:after {
    display: block;
  }
  .radio-wrap .checkmark:after {
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
}

.checkbox-cube {
  padding-left: 20px;
  .checkmark {
    box-shadow: inset 0px 0 0px 1px $primary-color;
    border-radius: 0 !important;
    top: 3px;
    height: 16px;
    width: 16px;
    &:after {
      left: 4px;
      top: 0px;
    }
  }
  input:disabled ~ .checkmark {
    box-shadow: inset 0px 0 0px 1px #eaeaea;
  }
}