//- ----------------------------------
//- 💫 COMPONENTS > TABLES
//- ----------------------------------

// Shadows adapted from "CSS only Responsive Tables" by David Bushell
// http://codepen.io/dbushell/pen/wGaamR

//- Table Container

.c-table
    vertical-align: top

    @include breakpoint(max, md)
        @include scroll-shadow-base($color-front)
        display: inline-block
        overflow-x: auto
        width: auto
        -webkit-overflow-scrolling: touch


//- Table Cell

.c-table__cell
    padding: 1rem
    border: 1px solid $color-subtle

    &.c-table__cell--highlight
        border: 2px solid $color-theme

    @include breakpoint(max, md)
        &:first-child
            @include scroll-shadow-cover(left, $color-back)

        &:last-child
            @include scroll-shadow-cover(right, $color-back)


//- Table Head Cell

.c-table__head-cell
    background: $color-theme
    color: $color-back
    padding: 1rem
    border: 1px solid $color-theme