@import "../var.scss";

$j-prefix-table: "#{$j-prefix}-table";
$j-prefix-table-responsive: "#{$j-prefix}-table-responsive";

.#{$j-prefix-table-responsive},
.#{$j-prefix-table}[data-responsive] {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

.#{$j-prefix-table} {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    flex-grow: 0;
    margin-bottom: 1rem;
    text-align: left;

    caption {
        text-align: left;
        font-weight: bold;
        padding: 0.5rem;
    }

    th {
        white-space: nowrap;
    }

    td,
    th {
        padding: 0.5rem;
        font-weight: 400;
        vertical-align: top;
    }

    &[data-border] {
        th,
        td {
            border: 1px solid $j-gray;
        }
    }

    &[data-border-bottom] {
        th,
        td {
            border-top: 0;
            border-left: 0;
            border-right: 0;
            border-bottom: 1px solid $j-gray;
        }

        thead {
            border-bottom: 2px solid $j-gray;
        }
    }

    &[data-color] {
        thead {
            border-bottom: 0;
        }
    }

    &[data-color="dark"] {
        th {
            color: #fff;
            background-color: $j-gray-dark;
            border-color: $j-gray-dark;
        }
    }

    &[data-color="light"] {
        th {
            color: $j-black;
            background-color: $j-gray-light;
            border-color: $j-gray-light;
        }
    }
}