<template>
  <!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
  <div class="ui-radio d-flex">
    <input
      type="radio"
      aria-checked="false"
      :name="groupName"
      :id="buttonID"
      :aria-required="isRequired"
      :value="value"
    />
    <label class="d-flex align-items-center" :for="buttonID">
      <p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>
      <span v-if="screenReaderOnlyText" class="sr-only">{{
        screenReaderOnlyText
      }}</span>
    </label>
  </div>
</template>

<script>
export default {
  name: "radio",
  props: {
    groupName: String,
    buttonLabel: String,
    buttonID: String,
    isRequired: Boolean,
    value: String,
    modelValue: String,
    screenReaderOnlyText: String,
  },
};
</script>

<style lang="scss">
.ui-radio {
  position: relative;
  input[type="radio"] {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    + label {
      display: block;
      position: relative;
      &:hover {
        cursor: pointer;
      }
    }
    + label::before {
      content: "";
      position: relative;
      display: inline-block;
      margin-right: 10px;
      width: 16px;
      height: 16px;
      background: white;
      border: 1px solid $gray-500;
      border-radius: 50%;
    }
    &:checked + label::before {
      background: $white;
      border: 1px solid $blue;
    }
    &:checked + label::after {
      content: "";
      position: absolute;
      top: 8px;
      left: 3px;
      height: 6px;
      width: 6px;
      transform: rotate(-45deg);
      border: 5px solid $blue;
      border-radius: 50%;
    }
    &:hover + label::before {
      box-shadow: 0 0 0 4px $blue-300;
    }
    &:focus + label::before {
      box-shadow: 0 0 0 2px $blue;
    }
    &:focus:checked + label::before {
      box-shadow: 0 0 0 2px transparent;
    }
    &:disabled + label {
      color: $gray-200;
    }
    &:disabled + label::before {
      background: $gray-200;
    }
  }
}
</style>
