$toggle-transition = .22s cubic-bezier(.4,0,.2,1)

.q-toggle
  vertical-align middle

  &__label
    font-size 14px
    line-height 20px

  &__native
    width 1px
    height 1px

  &__track
    height 14px
    border-radius 7px
    opacity .38
    background-color currentColor

  &__thumb-container
    left 10px
    right auto
    top 10px
    transform translate3d(0, 0, 0)
    transition transform $toggle-transition
    user-select none

  &__thumb
    width 20px
    height 20px
    border 10px solid
    border-radius 50%
    border-color #fff
    box-shadow 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12)

    .q-icon
      font-size 12px
      width 20px
      height 0
      line-height 0
      color black
      opacity .54

  &__inner
    width 56px
    min-width 56px
    height 40px
    padding 13px 12px

    &--active
      color $primary
      color var(--q-color-primary)
      .q-toggle__track
        opacity .54
      .q-toggle__thumb-container
        transform translate3d(16px, 0, 0)
      .q-toggle__thumb
        background-color currentColor
        border-color currentColor
        .q-icon
          color #fff
          opacity 1

  &.disabled
    opacity .75 !important

  &--dark
    .q-toggle__inner
      color #fff
      &--active
        color $primary
        color var(--q-color-primary)
    .q-toggle__thumb:before
      opacity .32 !important

  &--dense

    .q-toggle__inner
      height 20px
      padding 3px 12px
    .q-toggle__thumb-container
      top 0

body.desktop

  .q-toggle
    &__thumb:before
      content ''
      z-index -1
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      border-radius 50%
      background currentColor
      opacity .12
      transform scale3d(0, 0, 0)
      transition transform $option-focus-transition

    &:focus:not(.disabled) .q-toggle__thumb:before
      transform scale3d(2, 2, 2)

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