@use "../utilities";
@forward "./input-group";
@use "../../variables" as v;
@use "../variables";

// Adds control sizing to Bootstrap custom radio inputs

.custom-radio.b-custom-control-lg,
.input-group-lg .custom-radio {
  font-size: v.$font-size-lg;
  line-height: v.$line-height-lg;
  padding-left: variables.$b-custom-control-gutter-lg + variables.$b-custom-control-indicator-size-lg;

  .custom-control-label::before {
    top: (v.$font-size-lg * v.$line-height-lg - variables.$b-custom-control-indicator-size-lg) * 0.5;
    left: -(variables.$b-custom-control-gutter-lg + variables.$b-custom-control-indicator-size-lg);
    width: variables.$b-custom-control-indicator-size-lg;
    height: variables.$b-custom-control-indicator-size-lg;
    border-radius: variables.$b-custom-radio-indicator-border-radius-lg;
  }

  .custom-control-label::after {
    top: (v.$font-size-lg * v.$line-height-lg - variables.$b-custom-control-indicator-size-lg) * 0.5;
    left: -(variables.$b-custom-control-gutter-lg + variables.$b-custom-control-indicator-size-lg);
    width: variables.$b-custom-control-indicator-size-lg;
    height: variables.$b-custom-control-indicator-size-lg;
    background: no-repeat 50% / #{variables.$b-custom-control-indicator-bg-size-lg};
  }
}

.custom-radio.b-custom-control-sm,
.input-group-sm .custom-radio {
  font-size: v.$font-size-sm;
  line-height: v.$line-height-sm;
  padding-left: variables.$b-custom-control-gutter-sm + variables.$b-custom-control-indicator-size-sm;

  .custom-control-label::before {
    top: (v.$font-size-sm * v.$line-height-sm - variables.$b-custom-control-indicator-size-sm) * 0.5;
    left: -(variables.$b-custom-control-gutter-sm + variables.$b-custom-control-indicator-size-sm);
    width: variables.$b-custom-control-indicator-size-sm;
    height: variables.$b-custom-control-indicator-size-sm;
    border-radius: variables.$b-custom-radio-indicator-border-radius-sm;
  }

  .custom-control-label::after {
    top: (v.$font-size-sm * v.$line-height-sm - variables.$b-custom-control-indicator-size-sm) * 0.5;
    left: -(variables.$b-custom-control-gutter-sm + variables.$b-custom-control-indicator-size-sm);
    width: variables.$b-custom-control-indicator-size-sm;
    height: variables.$b-custom-control-indicator-size-sm;
    background: no-repeat 50% / #{variables.$b-custom-control-indicator-bg-size-sm};
  }
}