//- 💫 CSS > COMPONENTS > TABLES

//- Table container

.c-table
    vertical-align: top


//- Table row

.c-table__row
    &:nth-child(odd)
        background: rgba($color-subtle-light, 0.35)

    &.c-table__row--foot
        background: rgba($color-theme, 0.025)
        border-top: 2px solid $color-theme

        .c-table__cell:first-child
            @extend .u-text-label
            color: $color-theme


//- Table cell

.c-table__cell
    padding: 1rem

    &:not(:last-child)
        border-right: 1px solid $color-subtle


//- Table head cell

.c-table__head-cell
    font-weight: bold
    color: $color-theme
    background: $color-back
    padding: 1rem 0.5rem
    border-bottom: 2px solid $color-theme


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

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

    .c-table__cell,
    .c-table__head-cell
        &:first-child
            @include scroll-shadow-cover(left, $color-back)

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

    .c-table__row--foot .c-table__cell
        &:first-child
            @include scroll-shadow-cover(left, lighten($color-subtle-light, 2))

        &:last-child
            @include scroll-shadow-cover(right, lighten($color-subtle-light, 2))