@import "@css[shared]/components/forms/_custom-control";

.custom-radio {
   .custom-control-indicator {
      border-color: $text-muted;
      width: 26px;
      height: 26px;
   }

   .custom-control-input:focus ~ .custom-control-indicator {
      border-color: $text-dark;
   }

   .custom-control-input:active ~ .custom-control-indicator {
      border-color: $text-muted;
   }

   .custom-control-input:checked ~ .custom-control-indicator {
      background-color: $text-dark;
      border-color: $text-dark;

      &::before {
         @include fonticon;

         content: $custom-checkbox-icon;
         font-size: 12px;
         color: $white;
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
      }
   }
}

.custom-checkbox-lg {
   .custom-control-indicator {
      top: 8px;
   }

   .custom-control-input:checked ~ .custom-control-indicator {
      background: $text-dark;
      color: $white;
   }

   .custom-control-input:checked ~ .custom-control-indicator::before {
      content: $custom-checkbox-icon;
      font-size: 10px;
   }
}

.custom-checkbox {
   .custom-control-input:checked ~ .custom-control-indicator {
      background: $text-dark;
      color: $white;
   }

   .custom-control-input:checked ~ .custom-control-indicator::before {
      content: $custom-checkbox-icon;
      font-size: 10px;
   }
}
