@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%

figure > .root
    margin-bottom: var(--spacing-sm)

.fixed
    table-layout: fixed

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

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

.footer
    --color-inline-code-bg: var(--color-theme-opaque)
    background: var(--color-theme-light) !important
    border-top: 2px solid var(--color-theme-dark)

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

    & > td:nth-child(2) a
        border: 0

.td
    padding: 0.9rem 1rem
    font-size: 95%

    &: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-dark)
    padding: 1rem 0.5rem
    border-bottom: 2px solid var(--color-theme-dark)
    vertical-align: bottom

.th-rotated
    height: 100px

.tx
    transform: translate(15px, 0) rotate(315deg) // 45 = 360 - 45
    width: 30px
    white-space: nowrap

    & > span
        padding-left: 0.5rem

    [data-tooltip]
        display: inline-block
        transform: rotate(-316deg)

.divider
    height: 0
    border-bottom: 1px solid var(--color-subtle)

    td
        top: -1px
        height: 0
        position: relative
        padding: 0 !important

    & + tr td
        padding-top: 12px

    td em
        position: absolute
        top: -5px
        left: 10px
        display: inline-block
        background: var(--color-theme-dark)
        color: var(--color-back)
        padding: 0 5px 1px
        font-size: 0.85rem
        text-transform: uppercase
        font-weight: bold
        border: 0
        border-radius: 1em
        font-style: normal
        white-space: nowrap
        z-index: 5

    &:first-child // directly after thead/tr
        border-bottom: 0

        td em
            top: -7px


// 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))
