@import base

.root
    vertical-align: top
    font: var(--font-size-md)/var(--line-height-md) var(--font-primary)
    margin-bottom: var(--spacing-md)
    max-width: 100%

.fixed
    table-layout: fixed

.tr
    thead &:nth-child(odd)
        background: transparent

    &:nth-child(odd)
        background: var(--color-subtle-opaque)

.footer
    background: var(--color-theme-light)
    border-top: 2px solid var(--color-theme)

    & > td:first-child
        font-family: var(--font-secondary)
        color: var(--color-theme)

.td
    padding: 1rem

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

.num
    font-feature-settings: "tnum"
    font-variant-numeric: tabular-nums

    & > strong
        font-feature-settings: initial
        font-variant-numeric: initial

.nowrap
    white-space: nowrap

.th
    font: bold var(--font-size-md)/var(--line-height-md) var(--font-secondary)
    text-transform: uppercase
    color: var(--color-theme)
    padding: 1rem 0.5rem
    border-bottom: 2px solid var(--color-theme)
    vertical-align: bottom

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

@include breakpoint(max, md)
    .root
        @include scroll-shadow-base(var(--color-shadow))
        display: inline-block
        overflow-x: auto
        overflow-y: hidden
        width: auto
        -webkit-overflow-scrolling: touch

    .th, .td
        &:first-child
            @include scroll-shadow-cover(left, var(--color-back))

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

        &:first-child:last-child
            @include scroll-shadow-cover(both, var(--color-back))

    .footer .td
        &:first-child
            @include scroll-shadow-cover(left, var(--color-subtle-light))

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

        &:first-child:last-child
            @include scroll-shadow-cover(both, var(--color-subtle-light))