.q-slider

  position relative
  width 100%
  height 40px
  color $primary
  color var(--q-color-primary)
  outline 0

  &__track-container
    top 50%
    width 100%
    height 2px
    background rgba(0, 0, 0, .26)

  &__track
    will-change width, left
    background currentColor
    top 0
    bottom 0

  &__track-markers
    color black
    background-image repeating-linear-gradient(to right, currentColor, currentColor 2px, transparent 0, transparent)

    &:after
      content ''
      position absolute
      right 0
      top 0
      bottom 0
      height 2px
      width 2px
      background currentColor

  &__thumb-container
    top 11px
    width 21px
    transform translate3d(-10px, 0, 0) /* rtl:ignore */
    will-change left
    outline 0

  &__thumb
    top 0
    left 0
    transform scale3d(.571, .571, .571)
    transition transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
    stroke-width 3.5
    stroke currentColor

    circle
      stroke currentColor
      fill currentColor

  &__focus-ring
    width 21px
    height 21px
    transition transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
    border-radius 50%
    opacity 0
    transition-delay .14s

  &__pin
    top 0
    width 26px
    height 26px
    margin-top -2px
    margin-left -2px
    background currentColor
    transform rotate(-45deg) scale3d(0, 0, 0) translate3d(0, 0, 0)
    transition transform 100ms ease-out
    will-change left
    border-radius 50% 50% 50% 0%
    z-index 1

  &__pin-value-marker
    transform rotate(45deg)

    &-text
      position relative
      color white
      font-size 12px
      white-space nowrap

    &-bg
      position absolute
      min-width 27px
      width 130%
      height 27px
      left 50%
      top 50%
      transform translate3d(-50%, -50%, 0)
      background-color currentColor
      border-radius $generic-border-radius

  &--editable
    cursor grab

  &--no-value
    .q-slider__thumb, .q-slider__track
      visibility hidden

  &--focus
    .q-slider__thumb
      transform scale3d(.571, .571, .571)

  &--focus, body.desktop &.q-slider--editable:hover
    .q-slider__focus-ring
      background currentColor
      transform scale3d(1.55, 1.55, 1.55)
      opacity .25
    .q-slider__thumb, .q-slider__track
      visibility visible

  &--inactive
    .q-slider__thumb-container
      transition left .28s, right .28s
    .q-slider__track
      transition width .28s, left .28s, right .28s

  &--active
    cursor grabbing

    .q-slider__thumb
      transform scale3d(1, 1, 1)

    .q-slider__focus-ring, &.q-slider--label .q-slider__thumb
      transform scale3d(0, 0, 0) !important

  body.desktop &.q-slider--editable:hover .q-slider__pin
    transform rotate(-45deg) scale3d(1, 1, 1) translate3d(19px, -20px, 0)

  &--label
    &.q-slider--active, .q-slider--focus, &.q-slider--label-always
      .q-slider__pin
        transform rotate(-45deg) scale3d(1, 1, 1) translate3d(19px, -20px, 0)

  &--dark
    .q-slider__track-container
      background alpha(#fff, .3)
    .q-slider__track-markers
      color white

  &--dense
    height 20px

    .q-slider__thumb-container
      top 0

  &--reversed
    .q-slider__thumb-container
      transform translate3d(10px, 0, 0) /* rtl:ignore */