@import "{ohif:viewerbase}/app"

.group-radio
  label
    cursor: pointer

    input
      display: none

    span
      padding-left: 23px
      position: relative
      &:before
        background: white
        border-radius: 8px
        content: ''
        display: block
        height: 16px
        left: 0
        position: absolute
        top: 50%
        transform(translateY(-50%))
        width: 16px

    input:focus + span:before
      // TODO: [design] define a outline for the design
      theme('box-shadow', '0 0 2px 2px $textSecondaryColor')
      outline: none

    input:checked + span:after
      theme('background', '$uiBorderColorDark')
      border-radius: 5px
      content: ''
      height: 10px
      left: 3px
      position: absolute
      top: 50%
      transform(translateY(-50%))
      width: 10px