$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)