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

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

  @include user-selection(none);

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

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

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

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

    @include backface-visibility(hidden);

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

  }
}

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

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

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