.timeline
  height 50px
  position relative

  .time-tips
    width 130px
    font-size 12px
    position absolute
    background-color rgba(128, 128, 128, 0.5)
    color #fff
    height 16px
    top -30px
    padding 2px 0
    text-align center
    border-radius 2px
    left -45px
    transition-property all
    transition-duration 0.1s
    transition-timing-function linear

    .time-tips-time
      font-family VeraSansMono
      font-size 12px

  .time-tips-arrow
    position absolute
    bottom -6px
    left 50%
    margin-left -6px
    width 0
    height 0
    border-right 6px solid transparent
    border-left 6px solid transparent
    border-top 6px solid rgba(128, 128, 128, 0.5)

  .timeline-button
    position absolute
    right 0
    width 24px
    height 24px
    border-radius 50%
    background-color #84cdc9

    .timeline-play
      width 0
      height 0
      margin 7px 7px 7px 8px
      display inline-block
      border-style solid
      border-width 5px 0 5px 10px
      border-color transparent transparent transparent #299387

    .timeline-pause
      display inline-block
      width 10px
      height 10px
      margin 7px
      border-style double
      border-width 0 0 0 10px
      border-color #299387

  .timeline-content
    position absolute
    left 0
    right 30px
    height 100%


  .timeline-line
    height 25px
    position absolute
    display flex
    align-items center
    justify-content space-between
    left 10px
    right 10px
    top 0
    z-index 10

    &:after
      content ''
      background-color rgba(128, 128, 128, 0.5)
      position absolute
      top 0
      height 5px
      width 100%

  .timeline-line-limit,
  .timeline-line-passed
    position absolute
    top 0
    width 0
    height 5px
    background-color rgba(65, 248, 255, 1.000)
    pointer-events none
    transition-property all
    transition-duration 0.1s
    transition-timing-function linear
    z-index 12

  .timeline-line-limit
    background-color #7da8cc
    z-index 11

  .timeline-label
    color #fff
    display flex
    align-items center
    position absolute
    left 0
    right 0
    top 25px
    justify-content space-between

    span
      font-family "VeraSansMono"
      text-align center
      font-size 12px
      display block
      flex 0 0 20px
      position relative
      cursor default

      &:after
        z-index 9
        content ''
        position absolute
        height 10px
        top -20px
        background-color rgba(255, 255, 255, 0.5)
        width 1px
        left 50%
        margin-left -1px
        transition-duration 0.1s
        transition-property all
        transition-timing-function linear

      &:first-child:after
        height 15px
        margin-left 0

      &:last-child:after
        height 15px

      &.time-passed:after
        background-color rgba(65, 248, 255, 1.000)