.tracks
    position relative
    padding 10px 0 50px
    &.sorting
        .track
            transition 0

.track
    position absolute
    display block
    width 100%
    height 100px
    opacity 1
    transform translate(0, 0)
    transition .2s
    // When track is selected
    &.active
        font-style italic

        .rect-overlay
            fill-opacity 0
    // When track is showing, need to put the default values on the elemnts
    &.showing
        opacity 0
        transform translate(0, 40px)

        .track-play
            opacity 0
            transform translate(-20px, 0)

        figcaption
        .track-links
            opacity 0
            transform translate(0, 20px)
    // When track is hidden (filtered out)
    &.hidden
    // When track is deleted
    &.delete
        // Height transition is wonky :(
        height 0
        margin 0
        opacity 0
        transform translate(-500px) scale(.8)
        transform-origin 100% 50%
        transition-delay 0 !important
    &.sortable-ghost
        opacity .6

    // Your screen is too big if you can see more than 10 tracks
    for i in (1..10)
        & + :nth-child(n + {i})
            transition-delay .03s * i

    // .track-image
    &-image
    figcaption
    // .track-links
    &-links
        transform scale(1)
        opacity 1
        transition .2s .4s

    trackImageSize = 100px
    // .track-play
    &-play
        position absolute
        width trackImageSize
        height trackImageSize
        padding 0
        margin 0 4px 0 0
        border 0
        background linear-gradient(135deg, rgba(#e484be, .5), rgba(#83a2b1, .5))
        z-index 1
        transition .2s .4s
        &:after
            opacity 0
            content ''
            position absolute
            top 50%
            left 50%
            width 40px
            height @width
            border-radius 50%
            margin-top (@height / -2)
            margin-left (@width / -2)
            background orange getImage('track-play') no-repeat 50% 50% / 12px
            font-size 24px
            color white
            cursor pointer
            transition background-color .2s, opacity .2s
        &:hover:after
        &:focus:after
        .active &:after
            opacity 1
        &:active:after
            background-color orange-dark
        .playing &:after
            background-image getImage('track-pause')


    // .track-image
    &-image
        position absolute
        top 0
        left 0
        cursor pointer

    figcaption
        padding-left trackImageSize + 10

    // .track-details
    &-details
        width calc(100% - 80px)
        white-space nowrap
        overflow hidden
        text-overflow ellipsis

        // .track-details-user
        &-user
            display block
            color #999
            font-size 14px

        // .track-details-title
        &-title
            display block
            font-weight bold
            color text-color

        a
            text-decoration none
            &:hover
                text-decoration underline

    // .track-waveform
    &-waveform
        height 60px
        cursor pointer
        opacity 0
        transition .2s
        &.drawn
            opacity 1

        .rect-background
            fill #eaeaea

        .rect-buffered
            fill #ddd

        .rect-hovered
            fill lighten(orange, 30%)
            &.hidden
                opacity 0

        .rect-played
            fill url(#gradient-played)

        .rect-overlay
            fill #fafafa
            fill-opacity .5
            transition .4s

    // .track-duration
    &-duration
        position absolute
        left 100%
        top 55px
        margin-left 10px
        font-size 13px
        pointer-events none

    // .track-links
    &-links
        position absolute
        top 0
        right 0

    @media small
        trackImageSize = 60px
        // .track-play
        &-play
            width trackImageSize
            height trackImageSize
            bottom 0

        // .track-image
        &-image
            width trackImageSize
            height @width

        figcaption
            padding-left 0

        // .track-details
        &-details
            width calc(100% - 70px)
            margin-bottom 5px

        // .track-waveform
        &-waveform
            padding-left trackImageSize + 10px

        // .track-duration
        &-duration
            left auto
            right 0