@use "sass:math";
@use "../variables" as Vars;

// Hide native radio
input[type="radio"]:not(:checked), input[type="radio"]:checked {
  @include Vars.position(absolute, $left: -9999px);
  opacity: 0;
}

// Styles for label after radio
input[type="radio"] + label {
  $top-icon: math.div((Vars.$form-elements-height - Vars.$slab-radio-height), 2);

  @include Vars.user-selection(none);

  position: relative;
  padding-left: Vars.$slab-radio-text-gap;
  cursor: pointer;
  display: inline-block;
  height: Vars.$slab-radio-height;
  line-height: Vars.$slab-radio-height;
  font-size: 1rem;
  padding-top: $top-icon;

  &:empty {
    padding-left: Vars.$slab-radio-height;
  }

  &:before {
    @include Vars.size(Vars.$slab-radio-height);

    @include Vars.position(absolute, $top: $top-icon, $left: 0);

    @include Vars.backface-visibility(hidden);

    content: '';
    z-index: 0;
    border: solid math.div(Vars.$slab-radio-height, 8) var(--slab_component_border_color);
    border-radius: 50%;
    box-sizing: border-box;
    background-color: Vars.$slab-radio-color;

  }
}

// Define background color and icon size when checked
input[type="radio"]:checked + label:before {
  border: solid 6px Vars.$slab-radio-border-color;
}

input[type="radio"]:focus + label:before {
  border-color: Vars.$slab-focus-component-border-color;
  outline: 0;
  box-shadow: Vars.$slab-focus-component-shadow;
}

input[type="radio"]:disabled + label {
  opacity: 0.5;
  cursor: default;
}