table {
    &.table {
        line-height: $tableLineHeight;
        width: 100%;
        margin-bottom: $tableBottom;
        &.border {
            border: 1px solid $tableBorder;
        }
        &.stripe {
            tbody {
                tr {
                    &:nth-child(2n + 1) {
                        td {
                            background: $tableStripeBackground;
                        }
                    }
                }
            }
        }
        &.hover {
            tbody {
                tr {
                    &:hover {
                        td,
                        th {
                            background: $tableHover;
                        }
                    }
                }
            }
        }
        &.responsive {
            @include max(sm) {
                border-top: 0;
            }
            tr {
                th {
                    display: table-cell;
                    @include max(sm) {
                        display: none;
                    }
                }
                td {
                    display: table-cell;
                    @include max(sm) {
                        display: block;
                        padding-left: 42%;
                        padding-bottom: 0;
                        padding-right: $tablePaddingH;
                        position: relative;
                        border: 0;
                    }
                    &:first-child {
                        border-top: 1px solid $tableBorder;
                    }
                    &:last-child {
                        padding-bottom: $tablePaddingV;
                    }
                    &:before {
                        content: attr(data-th)": ";
                        color:  $tableThText;
                        font-weight: $tableThWeight;
                        display: none;
                        position: absolute;
                        left: $tablePaddingH;
                        top: $tablePaddingV;
                        width: 42%;
                        @include max(sm) {
                            display: block;
                        }
                    }
                }
            }
        }
        tr {
            th {
                color: $tableThText;
                font-weight: $tableThWeight;
                padding: $tablePaddingV $tablePaddingH;
                background: $tableThBackground;
            }
            td {
                padding: $tablePaddingV $tablePaddingH;
                border-top: 1px solid $tableBorder;
                background: $tableTdBackground;
            }
        }
    }
}
