$custom-checkbox-icon: $icons_check !default;
$custom-radio-icon: $icons_check;
$custom-control-size: 18px;
$custom-control-border-checked: $black !default;
$custom-control-border-active: $black !default;
$custom-control-color: null !default;
$custom-checkbox-size: 12px;
$custom-control-size-lg: 26px !default;
$custom-checkbox-size-lg: 16px;
$custom-control-font-size-lg: $font-size-h4 !default;

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

.custom-checkbox,
.custom-checkbox-lg {
   .custom-control-input:checked ~ .custom-control-indicator {
      background-color: $black;

      &::before {
         color: $white;
      }
   }
}

.custom-radio {
   .custom-control-indicator {
      @include fonticon;
   }

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

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

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

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