@import compass/css3
@import sortable

+sortable

table[data-sortable].sortable-theme-finder
    font-family: "Lucida Grande", sans-serif
    font-size: 12px
    line-height: 18px
    color: #000
    background: #fff
    border: 1px solid #cfcfcf

    th, td
        padding: 2px 8px

    thead th
        +background-image(linear-gradient(#fff 0%, #f6f6f6 50%, #f0f0f0 50%, #eee 100%))
        background-color: #f0f0f0
        border-bottom: 1px solid #ccc
        font-weight: normal

    tbody > tr:nth-child(odd) > td
        background-color: #f3f6fa

    th

        &:after
            border-width: 4px
            margin-right: 0

        &[data-sorted="true"]
            +background-image(linear-gradient(#c5e2f6 0%, #80c1f0 50%, #b8e7f5 100%))
            +background-size(28px 100%)
            +box-shadow(inset 1px 0 #7eb3d3, inset -1px 0 #7eb3d3)
            border-bottom-color: #7eb3d3
            background-color: #78c0f0

            &:first-child
                +box-shadow(inset -1px 0 #7eb3d3)

            &:last-child
                +box-shadow(inset 1px 0 #7eb3d3)

            &[data-sorted-direction="descending"]:after
                border-top-color: #548ec0
                margin-top: 6px

            &[data-sorted-direction="ascending"]:after
                border-bottom-color: #548ec0
                margin-top: 6px - 4px