@use "sass:math";

.custom-control {
   cursor: pointer;
   display: inline-block;
   height: auto;
   margin: 0;
   padding-left: 2rem;
   position: relative;

   &:hover .custom-control-indicator {
      border-color: $input-border-focus;
   }

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

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

   &:checked ~ .custom-control-indicator {
      border-color: $custom-control-border-checked;
   }

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

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

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

.custom-control-indicator {
   color: $custom-control-color;
   background: $input-bg;
   border: $input-border-width solid $input-border-color;
   display: block;
   pointer-events: none;
   position: absolute;
   left: 0;
   top: math.div(($line-height-base * 16 * parse_int($font-size-base)) - $custom-control-size, 2);
   user-select: none;
   width: $custom-control-size;
   height: $custom-control-size;
}

.custom-checkbox {
   .custom-control-indicator {
      @include fonticon;

      line-height: $custom-control-size;
      text-align: center;
   }

   .custom-control-input:checked ~ .custom-control-indicator::before {
      content: $custom-checkbox-icon;
      font-size: $custom-checkbox-size;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
   }
}

.custom-checkbox-lg {
   font-size: $custom-control-font-size-lg;
   font-weight: $font-weight-bold;
   padding-left: 2.5rem;

   .custom-control-indicator {
      @include fonticon;

      line-height: $custom-control-size;
      text-align: center;
      width: $custom-control-size-lg;
      height: $custom-control-size-lg;
      top: math.div(($line-height-base * 16 * parse_int($font-size-base)) - $custom-control-size-lg, 2);
   }

   .custom-control-input:checked ~ .custom-control-indicator::before {
      content: $custom-checkbox-icon;
      font-size: $custom-checkbox-size-lg;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
   }
}

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

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

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

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