$radio-size: .875rem

.radios__items
  display: flex
  flex-wrap: wrap
  column-gap: 1.5rem
  row-gap: .75rem

.radios__item
  label
    +text-block(.875rem 1.4)
    display: block
    color: var(--semi-muted-text)
    +position(relative)
    +hover-link
    cursor: pointer
    padding-left: calc(#{$radio-size} * 1.4)
    &.is-sm
      font-size: .8125rem
    &::before
      content: ""
      text-decoration: none
      +size($radio-size)
      border: solid 1px var(--input-border)
      display: block
      +position(absolute, left 0, top 50%)
      transform: translate(0, -50%)
      background-color: var(--base)
      border-radius: 50%
      +text-block(.75rem 1)
      color: var(--reversal-text)
      align-items: center
      justify-content: center
      transition: all .2s ease-out
  label:hover::before
    background-color: rgba($primary, .4)
    border-color: var(--primary)
  label:hover::after
    text-decoration: none
  input:checked + label
    color: var(--default-text)
  input:checked + label::before
    background-color: var(--primary)
    border-color: var(--primary)
    box-shadow: var(--background) 0 0 0 1px inset
  input:checked + label:hover::before
    border-color: var(--primary)
  input:checked + label::after
    opacity: 1
