// =Table
table,
.table {
    // colors
    --table-border-color: var(--palette-black-7);
    --table-head-border-color: var(--palette-black-7);
    --table-color: var(--text-default);

    // params
    --table-font-size: var(--type-scale-15);
    --table-line-height: var(--body-text-line);
    --table-border-style: solid;
    --table-border-width: 1px;
    --table-head-border-style: solid;
    --table-head-border-width: 1px;
    --table-padding: 0.75em 6rem 0.75em 2rem;

    // props
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    empty-cells: show;
    font-size: var(--table-font-size);
    line-height: var(--table-line-height);
    color: var(--table-color);

    th,
    td {
        padding: var(--table-padding);
    }
    th {
        border-bottom-style: var(--table-head-border-style);
        border-bottom-width: var(--table-head-border-width);
        border-bottom-color: var(--table-head-border-color);
    }
    td {
        border-bottom-style: var(--table-border-style);
        border-bottom-width: var(--table-border-width);
        border-bottom-color: var(--table-border-color);
    }

}
td,
th {
    text-align: left;
    vertical-align: top;

    &:first-child {
        padding-left: 0;
    }
}
th {
    font-weight: normal;
}
thead th {
    font-weight: bold;
}
caption {
    text-align: left;
    font-style: normal;
}
.table-scrollable {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}
.table-striped {
    --table-background-color: var(--palette-neutral-lightest);

    tr:nth-child(odd) td {
        background-color: var(--table-background-color);
    }
}
.table-striped,
.table-bordered {
    td,
    th {
        &:first-child {
            padding-left: 2rem;
        }
    }
}
.table-bordered {
    td,
    th {
        border: 1px solid var(--table-border-color);
    }
}
.table-light {
    --table-color: var(--text-light);
    --table-border-color: var(--palette-white-15);
    --table-head-border-color: var(--palette-white-15);
}
.table-striped.table-light {
    --table-background-color: var(--palette-white-10);
}

// Dark theme
@include dark-theme {
    table,
    .table,
    .table-light  {
        --table-border-color: var(--palette-white-10);
        --table-head-border-color: var(--palette-white-10);
    }
    .table-striped,
    .table-striped.table-light {
        --table-background-color: var(--palette-white-7);
    }
}