.radio-button {
  @include input-label;

  input {
    appearance: none;
    border-radius: var(--border-radius-round);
    width: var(--input-size);
    height: var(--input-size);
    border: solid var(--border-size) var(--grey-color-medium);
    transition: var(--transition-speed-quick) background-color var(--transition-animation-type);
    cursor: pointer;
    margin: .01rem;
    margin-right: .5rem;


    &:checked {
      cursor: default;

      + span {
        pointer-events: none;
        border-radius: var(--border-radius-round);
        position: absolute;
        margin: .325rem;
        background-color: var(--primary-color);
        width: calc(1.15rem - 10px);
        height: calc(1.15rem - 10px);
      }
    }

    &[variant="filled"] {

      &:checked {
        background-color: var(--primary-color);

        + span {
          background-color: var(--white-color);
          width: 5px;
          height: 5px;
          position: relative;
          margin-left: .425rem;
        }
      }
    }

    @include accessible-border-behavior;
  }

}