@layer kz-components {
  .radioInput {
    opacity: 0;
    position: absolute;

    :global(.ideal-sans) & {
      /* This is to override bootstrap styles. Remove when appropriate  */
      position: absolute;
    }
  }

  .icon {
    --icon-size: 10px;
    --icon-offset: 5px;

    top: var(--icon-offset);
    left: var(--icon-offset);
    width: var(--icon-size);
    height: var(--icon-size);
    border-radius: 50%;
    background: var(--color-gray-600);
    position: absolute;

    &.reversed {
      background: var(--color-white);
    }

    @media (forced-colors: active) {
      /* 
      High contrast mode with remove the background color so we have to use border to create the selected icon state.
      Transparent is used so the user defined colors for borders will be used here
      */
      border: var(--icon-offset) solid transparent;
      width: 0;
      height: 0;
    }
  }

  .box {
    --radio-size: 24px;
    --focus-ring-offset: 2px;

    display: block;
    position: relative;
    background: var(--color-white);
    height: var(--radio-size);
    width: var(--radio-size);
    top: 0;
    border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);
    box-sizing: border-box;
    border-radius: 50%;

    .radioInput:focus:not([disabled]) + & {
      border-color: var(--color-gray-600);
      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
        var(--color-blue-500);
      outline-offset: 1px;
    }

    .radioInput:not([disabled]) + &:hover {
      border-color: var(--color-gray-600);
      background-color: var(--color-gray-200);
    }

    &.reversed {
      border: var(--border-solid-border-width) var(--border-solid-border-style)
        rgb(var(--color-white-rgb), 0.65);
      background: transparent;

      .radioInput:focus:not([disabled]) + & {
        border-color: var(--color-white);
        outline-color: var(--color-blue-300);
      }

      .radioInput:not([disabled]) + &:hover {
        border-color: var(--color-white);
        background-color: transparent;
      }
    }
  }
}