/*----------------------------------------------------------------------------*\
    Table
\*----------------------------------------------------------------------------*/

/*  Variables
\*----------------------------------------------------------------------------*/

$use-table: true !default;

/*  Component
\*----------------------------------------------------------------------------*/

@if $use-table == true {

    table {
        width: 100%;
        border-collapse: collapse;


        // Table row
        tr {
            background-color: transparent;

            @include media-query(xs) {
                width: 100%;
                display: inline-block;
                margin-bottom: 15px;
                border: none;

                &:last-of-type {
                    border-bottom: none;
                }
            }

            // Table column
            td {
                padding: 15px 20px;

                @include media-query(xs) {
                    padding: 7px 15px;
                    display: inline-block;
                    width: 100%;
                }
            }
        }

        // Table head
        thead {

            // Table head column
            th {
                font-weight: 700;
            }

            @include media-query(xs) {
                display: none;
            }
        }
    }

}