table {
    background: $table-background;
    width: 100%;

    &.dark {
        background: $table-dark-background;
        color: $table-dark-color;

        thead {
            background: $table-thead-dark-background;
        }

        tbody tr:hover {
            background: $table-dark-tr-hover-background;
        }
    }

    thead {
        background: $table-thead-background;

        &.with-bt th {
            border-top: 1px solid $table-td-border;
        }

        th {
            font-weight: bold;
        }
    }

    tr {
        transition: background 0.3s ease;
    }

    tbody tr:hover {
        background: $table-tr-hover-background;
    }

    th, td {
        padding: .75rem;
        vertical-align: middle;

        a, button {
            display: inline-block;
            background: transparent;
            border: none;
            color: inherit;
            font-size: 1rem;
            padding: 0;
            font-weight: normal;
            letter-spacing: inherit;
            word-spacing: inherit;
            cursor: pointer;
            transition: color 0.3s ease;

            &:hover {
                color: $table-action-hover;
            }
        }
    }

    td {
        border-top: 1px solid $table-td-border;
        text-align: center;
    }
}

.mobile-table {
    overflow-x: auto;
}