$radio-transition = .22s cubic-bezier(0,0,.2,1) 0ms

.q-radio
  vertical-align middle

  &__bg
    left 10px
    top 10px
    width 50%
    height 50%

  &__native
    width 1px
    height 1px

  &__outer-circle
    border-width 2px
    border-style solid
    border-radius 50%

  &__inner-circle
    border-width 10px
    border-style solid
    border-radius 50%
    transform scale3d(0, 0, 0)
    transition transform $radio-transition

  &__label
    padding-left 4px
    padding-right 0
    font-size 14px
    line-height 20px

  &.reverse &__label
    padding-right 4px
    padding-left 0

  &__inner
    width 40px
    min-width 40px
    height 40px
    padding 10px
    outline 0
    border-radius 50%
    color rgba(0, 0, 0, .54)

    &--active
      color $primary
      color var(--q-color-primary)
      .q-radio__inner-circle
        transform scale3d(.5, .5, .5)

  &.disabled
    opacity .75 !important

  &--dark
    .q-radio__inner
      color rgba(255, 255, 255, .7)
      &:before
        opacity .32 !important
      &--active
        color $primary
        color var(--q-color-primary)

  &--dense

    .q-radio__bg
      left 0
      top 0
      width 100%
      height 100%

    .q-radio__inner
      width 20px
      min-width 20px
      height 20px

body.desktop

  .q-radio
    &__inner:before
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      border-radius 50%
      background currentColor
      opacity .12
      transform scale3d(0, 0, 0)
      transition transform $radio-transition

    &:focus:not(.disabled)
      .q-radio__inner:before
        transform scale3d(1, 1, 1)

    &--dense:focus:not(.disabled) .q-radio__inner:before
      transform scale3d(1.5, 1.5, 1.5)