@import '../global-sass-files/variables';

// Radio button
.custom-control {
  position: relative;
  display: block;
  line-height: 12px;
  min-height: 15px;
  padding-left: 15px;
  .form-check-input,
  .custom-control-input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    &:focus ~ {
      .custom-control-label::before {
        box-shadow: none !important;
      }
    }
  }
  &.custom-radio {
    .custom-control-label {
      padding-left: 5px;
      cursor: pointer;
      margin-bottom: 0;
      font-size: 12px;
      font-family: $primary-font-regular;
      color: #242f3a;
      display: block;
      margin-bottom: 5px;
      &:before, &:after {
        position: absolute;
        left: 0;
        display: block;
        width: 15px;
        height: 15px;
        content: "";
        top: -1px;
        border-radius: 50%;
        cursor: pointer;
      }
      &:before {
        background: url("../../img/icons/radio-buttons-stripe.png") no-repeat;
        background-position: -8px -8px;
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      &:after {
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 50% 50%;
      }
    }
    &.green {
      .custom-control-label {
        line-height: 17px;
        margin-left: 3px;
        &:before {
          background: url("../../img/icons/radio-buttons-stripe-green.png") no-repeat;
          background-position: 0px -2px;
          width: 17px;
          height: 17px;
        }
      }
    }
    .form-check-input:checked~.custom-control-label:after {
      background: url("../../img/icons/radio-buttons-stripe.png") no-repeat;
      background-position: -8px -56px;
    }
    .form-check-input:checked~.custom-control-label:before {
      background: none;
    }
    &.green {
      .form-check-input:checked~.custom-control-label:after {
        background: url("../../img/icons/radio-buttons-stripe-green.png") no-repeat;
        background-position: -0px -86px;
        width: 17px;
        height: 17px;
      }
    }
  }
}
.custom-checkbox .custom-control-label:after {
  top: 2px;
}