.range
  position: relative
  width: 14em
  z-index: 1
  opacity: 0

  &:not(:last-child)
    margin-bottom: 2em

  &__label
    position: relative
    font-size: 0.9em
    line-height: 0.75em
    padding-bottom: 0.5em
    z-index: 2

  &__track
    position: relative
    height: 1em
    margin-left: 0.5em
    margin-right: 0.5em
    z-index: 3

    &-line
      position: absolute
      background: rgba(#000, 0.2)
      height: 2px
      top: 50%
      margin-top: -1px
      left: -0.5em
      right: -0.5em
      transform-origin: left center

  &__handle
    position: absolute
    width: 0
    height: 0
    top: 50%
    left: 0
    cursor: pointer
    z-index: 1

    div
      transition: background 500ms ease
      position: absolute
      left: 0
      top: 0
      width: 0.9em
      height: 0.9em
      border-radius: 0.2em
      margin-left: -0.45em
      margin-top: -0.45em
      background: #41aac8
      border-bottom: 2px solid rgba(#000, 0.2)

      .range.is-active &
        transform: scale(1.25)

    &:after
      content: ''
      position: absolute
      left: 0
      top: 0
      width: 3em
      height: 3em
      margin-left: -1.5em
      margin-top: -1.5em

  &__list
    display: flex
    flex-flow: row nowrap
    justify-content: space-between
    position: relative
    padding-top: 0.5em
    font-size: 0.55em
    color: rgba(#000, 0.5)
    z-index: 1

  &--type
    &-color
      &:not(:last-child)
        margin-bottom: 1em

      .range
        &__list
          display: none

        &__handle
          > div
            background: currentColor !important

        &__track
          &-line
            background: transparent

            &:after
              +inset
              content: ''
              opacity: 0.5

  &--color
    &-hue
      .range
        &__handle
          color: red

        &__track
          color: red

          &-line
            &:after
              background: linear-gradient(to right, red, yellow, lime, cyan, blue, magenta, red)
              

    &-saturation
      .range
        &__handle
          color: red

        &__track
          color: red

          &-line
            &:after
              background: linear-gradient(to right, gray, currentColor)

    &-lightness
      .range
        &__handle
          color: red

        &__track
          color: red

          &-line
            &:after
              background: linear-gradient(to right, black, currentColor, white)
