.custom-control {
   cursor: pointer;
   display: inline-block;
   height: auto;
   margin: 0;
   padding-left: $custom-control-size + .75rem;
   position: relative;
   min-height: $custom-control-size;

   &:hover .custom-control-indicator {
      border-color: $state-success;
   }

   &.disabled {
      opacity: .5;
      pointer-events: none;
   }
}

.custom-control-input {
   opacity: 0;
   position: absolute;
   z-index: -1;

   &:checked ~ .custom-control-indicator {
      border-color: $state-success;
      background-color: $state-success;

      &::before {
         content: $custom-checkbox-icon;
      }
   }

   &:focus ~ .custom-control-indicator {
      border-color: $state-success;
   }

   &:active ~ .custom-control-indicator {
      border-color: $state-success;
   }

   &:disabled {
      ~ .custom-control-indicator {
         border-color: #b4b4b4;
         background-color: #dbdbdb;
      }
   }
}

.custom-control-indicator {
   background: $input-bg;
   border: $input-border-width solid $input-border-color;
   color: $white;
   display: block;
   font-size: $custom-control-size;
   pointer-events: none;
   position: absolute;
   left: 0;
   text-align: center;
   top: calc((#{($line-height-base * 16 * parse_int($font-size-base))}px - 1em) / 2);
   user-select: none;
   width: 1em;
   height: 1em;

   &::before {
      @include fonticon;

      font-size: .8em;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
   }
}

.custom-radio {
   .custom-control-indicator {
      border-radius: 50%;
   }
}
