.table-box
{
    overflow-x: auto;
    margin: steps(3) 0;

    &:last-child
    {
        margin-bottom: 0;
    }

    table
    {
        width: 100%;
        border: 1px solid $color-border-normal;
        border-collapse: collapse;
    }

    caption
    {
        @include baseline-box(18px, steps(3), 0.6px, steps(1), steps(2));

        padding-left: steps(3);
        padding-right: steps(3);
        border: solid $color-border-normal;
        border-width: 1px 1px 0;
        margin-bottom: 0;

        font-weight: bold;
        background: $color-background-lighter;
        text-align: left;
    }

    tr
    {
        border-bottom: 1px solid $color-border-normal;
    }

    th, td
    {
        &, p
        {
            @include baseline-box(16px, steps(3), 0.5px, steps(2), steps(2));
        }

        p
        {
            padding: 0;
        }

        padding-left: steps(3);

        font-weight: normal;
        text-align: left;
        vertical-align: top;

        &:last-child
        {
            padding-right: steps(3);
        }
    }

    thead
    {
        tr
        {
            border-bottom: 0;
        }

        th
        {
            @include inverted($text-color: $color-text-inverted-lighter);
            @include baseline-box(14px, steps(2), 0.5px, steps(2), steps(2));

            font-weight: bold;
        }
    }

    tbody
    {
        th
        {
            padding-right: steps(3);

            color: $color-text-darker;
            background: $color-background-lighter;
        }
    }

    @include for-at-least-tablets {

        &.is-compact {
            overflow: hidden;

            p {
                margin: 0;
            }

            th, td, td[title]
            {
                padding: steps(1) steps(0.5);
            }
        }
    }

    @include for-phones
    {
        margin-top: steps(2);
        margin-bottom: steps(2);

        table, caption, thead, tbody, tr, th, td
        {
            display: block;
        }

        table
        {
            border-bottom: 0;
        }

        caption
        {
            @include baseline-box(16px, steps(2.5), 0.5px, steps(1.5), steps(1));

            border-width: 0 0 1px;
        }

        thead
        {
            display: none;
        }

        tbody th
        {
            color: inherit;
            background: none;
        }

        th, td
        {
            padding-left: steps(3);
            padding-right: steps(3);

            &[title]
            {
                position: relative;

                &::before
                {
                    content: attr(title);

                    @include baseline-box(14px, steps(2.5), 0.5px, 0, steps(-0.5));

                    display: block;

                    font-weight: bold;
                    color: $color-text-darker;
                }
            }

            &:not(:last-child)
            {
                padding-bottom: 0;
            }

            &, p
            {
                @include baseline-box(16px, steps(2.5), 0.5px, steps(2), steps(2));
            }

            p
            {
                padding: 0;
                margin-bottom: steps(1.5);

                &:last-child
                {
                    margin-bottom: 0;
                }
            }
        }
    }
}